如何让元素在页面循环旋转?

旋转特效

需求:图片素材自转,然后围绕中心点公转。

这里其实自转很好说,简单写一个动画然后设置时间以及无限循环就可以了。

@keyframes xuanzhuan{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

公转则主要要运用到transform-origin这个属性。

transform-Origin属性允许您更改转换元素的位置。
2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

公转其实这里我推荐设置包裹元素的div宽高一致,最好是跟屏幕的高度一致,然后调整旋转的中心点即可。

这里大概估算一个值,最好是50% 50%,然后在浏览器里自己旋转一下试试,看看偏移位置,然后再进行调整即可。

.xz {
    height: 736px;
    width: 736px;
    position: absolute;
    top: 0;
    transform-origin: 52.6% 50%;
    animation: xuanzhuan 10s linear infinite;
}

我这里是设置的x的点是我屏幕的宽度,然后y的点是屏幕的高度的一半,效果还可以,子元素都在线上旋转。

这里其实说一下,比如说有的元素在最初展示的时候,是不在主页面的,需要通过旋转来展现,我们可以让他先出现在主页面,然后通过旋转外面的元素,再调整top,left的值就行了。

最后修改:2021 年 11 月 03 日 03 : 08 PM
如果觉得我的文章对你有用,请随意赞赏