[分享]css3实现围绕圆心旋转

CSS3中的transform属性可以实现围绕圆心旋转的效果。transform属性是一种微调元素的CSS3属性，它可以控制元素的旋转、缩放、平移、倾斜等效果。下面是一个使用CSS3 transfor...

CSS3中的transform属性可以实现围绕圆心旋转的效果。transform属性是一种微调元素的CSS3属性，它可以控制元素的旋转、缩放、平移、倾斜等效果。

下面是一个使用CSS3 transform属性实现围绕圆心旋转的代码示例：

.circle {
    width: 100px;
    height: 100px;
    background-color: #f00;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    transform-origin: center center;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
} 

在上面的代码中，首先创建了一个圆形的元素.circle。然后，使用position属性将元素定位在屏幕中心，使用transform-origin属性指定元素的旋转中心为圆形中心。

接着，使用@keyframes规则定义了一个名为rotate的动画，将元素围绕圆心旋转360度，持续时间为2秒，线性变化。

最后，在.circle元素中使用animation属性将rotate动画应用于该元素，并使其无限循环，实现围绕圆心旋转的效果。

通过这种方法，可以轻松实现各种有趣的旋转效果，使网页更加生动有趣。