CSS3的3D动画

---

transition：过渡

div{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

元素从一种样式逐渐改变为另一种的效果

transform：变换

对元素进行移动、缩放、转动、拉长或拉伸。

---

1. rotateX() 方法
   通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */
}

---

2.rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */
}

---

动画延迟：
transition-delay:2s;

规定width动画效果的时长
transition: width 2s;