使用CSS”transform”、“perspective”属性制作三维Spin

在CSS中，transform 属性控制元素在平面或者三维控件中的平移、旋转、缩放、倾斜；perspective属性能够控制观察者距离 z=0 平面的视距；perspective-origin属性能够控制元素的消失点。

利用这种变换和三维显示的能力，结合CSS的动画关键帧属性我们能够使用html元素直接创建出带有三维效果的循环Spin动画。

下面示例中的Spin动画中，使用了perspective属性、transform属性的旋转、以及animation属性创建了一个简单流畅的Spin效果。

一、示例

Animation 01

Animation 02

Animation 03

三维效果很明显、流畅度还行，点击上方蓝色按钮在新页面中打开，可查看源代码~

来试一试吧~

二、参考文档

transform – CSS（层叠样式表） | MDN (mozilla.org)

perspective – CSS（层叠样式表） | MDN (mozilla.org)

perspective-origin – CSS（层叠样式表） | MDN (mozilla.org)

animation – CSS（层叠样式表） | MDN (mozilla.org)