[分享]css3按中心点旋转

CSS3中提供了很多旋转的方法，其中按中心点旋转是最基本的一种。按中心点旋转可以把元素围绕中心点旋转任意角度，可以很好地实现一些炫酷的效果。/ CSS代码 / .rotate{ display: in...

CSS3中提供了很多旋转的方法，其中按中心点旋转是最基本的一种。按中心点旋转可以把元素围绕中心点旋转任意角度，可以很好地实现一些炫酷的效果。

/* CSS代码 */
.rotate{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
    transform-origin: center;
    transition: transform 1s ease-in-out;
}
.rotate:hover{
    transform: rotate(360deg);
} 

上述代码可以将一个红色正方形实现按中心点旋转的效果。其中，transform-origin属性用于设置旋转中心点，这里设置为元素的中心点。当鼠标悬浮在正方形上时，触发:hover伪类，元素开始旋转，旋转一周需要1秒钟，旋转效果使用了ease-in-out函数，呈现出较为平滑的运动轨迹。

需要注意的是，transform-origin属性可以设置为各种数值，如按照像素、百分比、关键字等，以实现不同的旋转效果。同时，如果不设置中心点，元素默认按照左上角作为旋转中心点。

总之，按中心点旋转是CSS3中非常实用的一种效果，可以灵活运用于各种场景之中，让页面更加动感有趣。