[分享]css3改变变化的圆心

CSS3是Web设计的必备技术之一，其中包括了许多有趣的特性。其中，改变变化的圆心也是CSS3的一项重要功能。下面，我们来看一下如何利用CSS3改变变化的圆心。.container{ width: 2...

CSS3是Web设计的必备技术之一，其中包括了许多有趣的特性。其中，改变变化的圆心也是CSS3的一项重要功能。下面，我们来看一下如何利用CSS3改变变化的圆心。

.container{
 width: 200px;
 height: 200px;
 position: relative;
 background: #f1f1f1;
}

.circle{
 width:60px;
 height:60px;
 border-radius:50%;
 background:#333;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
} 

上面的代码中，我们创建了一个容器元素；接着，利用CSS3的定位与transform属性创建了一个圆形元素。其中，top与left属性将其放置在容器元素的中心位置。

接着，我们可以通过改变变化的圆心，让圆形元素在容器元素中任意位置移动。

.circle{
 width:60px;
 height:60px;
 border-radius:50%;
 background:#333;
 position:absolute;
 top:70px;
 left:70px;
 transform-origin:0% 0%;
 transform:rotate(45deg);
} 

上面的代码中，我们仍然是利用了定位属性将圆形元素放置在了容器元素的左上角，并且通过CSS3新增的transform-origin属性指定了其变化的圆心。通过transform属性中的rotate()函数，我们将其旋转了45度。需要注意的是，在使用rotate()函数时，如果未指定变化的圆心，则默认会以元素中心作为其旋转的中心点。

总的来说，CSS3的改变变化的圆心功能使得Web设计更加灵活多变，能够更好地满足用户的需求。