css3 立方体3d旋转效果

立方体3d旋转效果

通过上面的主题，我们就应该要知道今天我们需要那些东西来完成主题所说的立方体3d旋转特效。
我们需要立方体、旋转属性、动画这三个知识点。

第一步

我们要在网页中搭建立方体。
（分析：网页中是二维画面，我们需要三维画面）
所以我们需要一个属性：transform-style: preserve-3d;。这个属性，来改变网页中立方体所在的父元素为三维。

transform-style: preserve-3d;让当前元素形成一个3D舞台，让其子元素在3D空间里面进行一个变换。

第二部

我们要了解网页中是怎么实现立方体的。

方法一

方法二

上面是两种立方体实现方法的过程。

（分析：通过gif图片动态演示，做出这样的立方体，我们需要那些属性)

通过分析后，我们应该需要以下属性：
3d平移： transform:translate3D（X,Y,Z）;

3d平移
transform:translate3D（X,Y,Z）;定义3d移动
transform:translateX（）;定义3d移动中，只用X轴的值
transform:translateY（）;定义3d移动中，只用Y轴的值
transform:translateZ（）;（值不能为百分比）定义3d移动中，只用Z轴的值

3d旋转：transform：rotate3D（X,Y,Z,a）;

3d旋转
transform:rotateX（）;定义沿着X轴进行3d旋转
transform:rotateY（）;定义沿着Y轴进行3d旋转
transform:rotateZ（）;定义沿着Z轴进行3d旋转

transform：rotate3D（X,Y,Z,a）;定义3d旋转
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

改变原点transform-origin：水平方向 垂直方向;.


通过上面的属性我们京可以实现基本的立方体了。
代码如下:

第三部

旋转动画，在上面立方体的实现中，就用到了这个属性。而这里是对整个立方体进行3d的旋转。
我们先来看看两种不同方法做出来的立方体的3d旋转是有什么区别。

方法一 做出来的立方体正义旋转

方法二 做出来的立方体正义旋转

其实他们都是用了一样的关键帧动画属性。

关键帧动画
动画 ：animation：关键帧名称 动画持续时间 动画类型 动画延迟 动画次数；

animation: 复合属性
animation-name :    ;关键帧的名称
animation-duration :    ;(动画的持续的时间)
animation-timing-function:   ; 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
animation-delay:   ; (动画的延迟)
animation-iteration-count：  ； 动画运动的次数（默认情况下运动1次） infinite(无限循环)
animation-direction （运动的方向）
                               属性值：
                                - reverse：反方向运行 （ 让关键帧从后往前执行 ）
                                - alternate：动画先正常运行再反方向运行，并持续交替运行
                                - alternate-reverse：动画先反运行再正方向运行，并持续交替运行

制定关键帧：@keyframes 关键帧名称{ 0%{开始状态} 25%{} 50%{} 75%{} 100%{结束状态}}

下面是两种关键帧的用法

@keyframes 关键帧的名称{ 0%{ //开始状态 } 25%{ } 50%{ } ...... 100%{ //结束状态 } }

@keyframes 关键帧的名称{ from{} to{} }

通下面的代码，我们就可以实现上面的立方体3d旋转效果了。

代码如下：