css3d动画演示（CSS3之3D轮播动画详解）

大家好，今天跟大家分享的是通过CSS3实现3D轮播动画效果的方法，话不多说，点击下方视频查看效果：

首先，在操作之前我们必须要知道它的原理，下面我以动图的形式来展现他形成过程：

原理

如果还不理解，下面我们再把它细化一下：

逐步

这下我们可以清楚看出，所谓的3D立体效果其实就是由几个平面图形经过旋转和移动组合在一起而形成的，现实中我们可以用几张卡片模拟摆放出来。

既然是3D立体效果肯定需要在三维空间内完成，在网页中三维坐标如下图所示，在CSS中我们可以让目标对象延任意坐标轴移动（translate）或以任意坐标轴为中心旋转（rotate），根据需要指定即可。

页面三维坐标

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

1. HTML结构：外围设置两层<div>盒子包裹内容主体，最外层<div>用来设置基本布局和样式，第二层<div>用来引入动画，内容部分用9个<div>小盒子生成。

HTML结构

2.基本样式设置：这里不用多说，都能看得懂，line-height设为90px与后面的内容小盒子同高实现文本垂直居中。

基本样式

3.主体内容通用样式：这里需要注意的是position属性设为absolute,可以不设置具体值但必须要有，目的是为了让9个小盒子重叠在同一平面。

通用样式

4.立体效果设置：前面已经介绍过了，要实现立体效果，需要每个内容主体经过一定的旋转和移动。那么问题来了，要旋转多大的角度移动多远的距离呢？参考下图我们从俯视的角度来理解这个问题，顺便复习一下初中数学知识。

计算方法

由此可知，我们需要旋转的角度依次为：0° ，40° ，80°， 120° ······，依次增加40°，需要移动的距离大约为192px,为了让图片之间留出一定的间距，实际移动距离略大于理论距离，该示例移动了210px，下面是相应的CSS。

注意事项：背景颜色可以适当的设置一下透明度，每张图片都是先以Y轴为中心旋转（rotateY）相应的角度，再延Z轴移动（translateZ）210px，如果先移动再旋转你会发现9张图片是交叉在一起的。

现在刷新页面可以得到下面的效果：

咦！貌似有点那个意思了，聪明的你应该会发现还有两个问题没有解决：一是它还没有动起来，二是看上去并不立体。那么重点来了······

5.动起来：首先我们需要定义一个动画，然后再需要动的地方引用它，从开篇的效果中可以看出是由9张图片组成的整体以Y轴为中心进行360°循环旋转。因此我们以 “@keyframes 动画名称” 的方式来定义一个动画（详细介绍请参考w3school），0%为初始状态，100%为最终状态，然后再父元素中引用它即可。

scroll为动画名称，可自定义

6.更立体：“transform-style:preserve-3d”能够化腐朽为神奇，在父元素中添加该属性即可。

立体

此时刷新页面会是这种效果：

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

正常情况下物体离视线越远越小，但一个规整的立体图形如果离我们视线很近的话每个面的大小差别很难看出来，在CSS中可以用perspective来调节视角的远近，还可以用“perspective-origin”来调整视角的位置，感兴趣的小白们可以去试试。

好了，大功告成，现在可以刷新你们的页面了！

声明：本人也是小白一枚，此文只为相互交流，如有错误请多指正

,