大家好。今天给大家分享的是通过CSS3实现3D旋转木马动画效果的方法。我不需要多说什么。点击下面的视频查看效果:

首先，我们在操作之前一定要知道它的原理。我用动画的形式展示一下它的形成过程:

原则

如果你还是不明白，我们来提炼一下:

循序渐进

我们可以清楚地看到，所谓的3D立体效果，其实是由几个平面图形通过旋转和移动组合而成的。现实中，我们可以用几张卡片来模拟。

既然是3D立体效果，那就必须用3D 空完成。网页中的3D坐标如下图所示。在CSS中，我们可以让目标对象沿任意坐标轴平移或绕任意坐标轴旋转，并根据需要指定。

页面的三维坐标

接下来我们来看看如何通过CSS3在一个网页中实现这种效果。

HTML结构:外围设置两层

HTML结构

2。基本风格设定:这里不用多说，大家都能看懂。line-height设置为90px，与后面的内容框高度相同，实现文本垂直居中。

基本风格

3。主体内容的一般样式:这里需要注意的是，position属性设置为absolute，可以不设置具体值，是为了让9个小方框重叠在同一个平面上。

一般风格

4。立体效果设置:如前所述，要达到立体效果，每个内容主体都需要进行一定程度的旋转和移动。那么问题来了，旋转多少角度，移动多远？参考下图从俯视的角度理解这个问题，顺便复习初中数学知识。

计算方法

可以看出，我们需要的旋转角度是:0，40，80，192px ……可以看出，我们需要的旋转角度是:0，40，80，192px

注意:背景色可以适当设置透明度。每张图片围绕Y轴旋转相应的角度，然后沿Z轴移动210px。如果先移动，再旋转，会发现九张图片是交叉的。

现在刷新页面可以获得以下效果:

哎！好像有那样的东西。如果你聪明的话，应该会发现还有两个问题没有解决:一是它还没有动，二是它看起来没有立体感。所以重点来了...

5。移动:首先我们需要定义一个动画，然后在需要移动的地方引用它。从开场效果可以看出，9张图片组成的整体围绕Y轴旋转360。所以我们定义一个动画为“@关键帧动画名”(具体参考w3school)，0%为初始状态，100%为最终状态，然后在父元素中引用。

scroll是动画名称，可以自定义。

6。更立体:《transform-style:preserve-3d》可以化腐朽为神奇，只需在父元素中加入这个属性即可。

立体的

此时刷新页面会产生这样的效果:

貌似和最终效果还有些偏差，这时我们只需要用“perspective”调整一下视角就可以了，给最外围盒子添加样式perspective：1000px;该属性用来调整视角的远近。

一般情况下，物体离视线越远，体积越小。但是，如果一个规则的立体图形靠近我们的视线，每张脸的大小差异就很难看出来。在CSS中，可以使用透视来调整视角的距离，也可以使用“透视-原点”来调整视角的位置。感兴趣的白人可以试试。

好了，你完了。现在你可以刷新你的页面了！

免责声明:我也是小白。本文仅供相互交流。如有错误，请指正。

,