转换（transform）和过渡（transition）

CSS3 2D 转换

【工作方式】

• 转换是使元素改变形状、尺寸和位置的一种效果。

【浏览器支持】

• Internet Explorer 10、Firefox 以及 Opera 支持 【transform】 属性。
• Chrome 和 Safari 需要前缀 【-webkit-】。
• Internet Explorer 9 需要前缀 【-ms-】。

【不同浏览器加效果时的前缀】
eg.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}

一、transform转换

translate()
rotate()
scale()
skew()
matrix()

1. translate() 方法
   通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
   eg.

   div
   {
       transform: translate(50px,100px);
       -ms-transform: translate(50px,100px);       /* IE 9 */
       -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
       -o-transform: translate(50px,100px);        /* Opera */
       -moz-transform: translate(50px,100px);      /* Firefox */
   }
   

二、transition过渡
transition 属性是一个简写属性，用于设置四个过渡属性：

    transition-property
    transition-duration
    transition-timing-function
    transition-delay

1. transition-property 规定设置过渡效果的 CSS 属性的名称。
   （1）none 没有属性会获得过渡效果。
   （2）all 所有属性都将获得过渡效果。
   （3）property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

2. transition-duration 规定完成过渡效果需要多少秒或毫秒。

3. transition-timing-function 规定速度效果的速度曲线。

   • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
   • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
   • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
   • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
   • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
   • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. transition-delay 定义过渡效果何时开始。