html旋转轮盘--图片在页面旋转

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

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

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

@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 的值就行了。