CSS3动画功能 --- transition、transform、3D场景

transition

transition: <过渡属性的名称> <过渡时间> <过渡模式>
-webkit-transition: 谷歌浏览器和Safari浏览器
-moz-transition: 火狐浏览器
-o-transition: Opera浏览器

【语法】

-webkit-transition:color 1s;

//或者

-webkit-transition-property:color;      //参与过渡的属性
-webkit-transition-duration:1s;         //过渡动画持续时间
-webkit-transition-timing-function:     //过渡动画类型

ease            缓慢开始，缓慢结束
linear          匀速
ease-in         缓慢开始
ease-out        缓慢结束
ease-in-out     缓慢开始，缓慢结束（和ease有区别）

-webkit-transition-delay:               //对象延迟过渡时间

多个属性的过渡效果：

方法一：

-webkit-transition:<属性1> <时间1>,<属性2> <时间2>.....

方法二：

-webkit-transition:<属性1> <时间1>;
-webkit-transition:<属性2> <时间2>;

---

transform

transform 用于元素变形处理。

【属性】：translate，rotate，scale，skew

translate

指定对象的2D translation(2D平移)。
第一个参数对应的是 X轴，第二个对应的为Y轴
例如：

    translate(10px,10px);
    // 右侧为 X方向+
    // 下方为 Y方向+

rotate

指定对象的2D rotate（旋转）,需要 transform-origin 属性定义。

    Rotate(90deg),transform-origin:0 0;(不设置默认为center中心)

scale

指定元素的 2D scale（缩放）。
第一个对应X轴，第二个对应Y轴。
第二个未设置，默认为第一个参数的值。

    scale(0.5,0.5);

这里写代码片

#

---

3D场景

设置3D场景

-webkit-perspective： 800; 距离窗口的距离
-webkit-perspective-origin:50% 50%; 视点的位置
-webkit-transform-style:-webkit-preserve-3d;

使用 transform属性调整元素：

• translate
  
  • translateX(x px)
  • translateY(y px)
  • translateZ(z px)
• rotate
  
  • rotateX(X deg)
  • rotateY(Y deg)
  • rotateZ(Z deg)