css-2D转换以及过渡

2D概念

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
2D 动画要是使用 transform 属性来实现文字或图像的的各种变形效果，如位移、缩放、旋转、倾斜等。

transform属性变形方法：

1.translate()：位移
　　　　　将元素沿着水平方向（X轴）和垂直方向（Y轴）移动

 translateX(x)：元素仅在水平方向移动（X轴移动）
 translateY(y)：元素仅在垂直方向移动（Y轴移动）
 transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）

案例示例：

div:hover{
    /*设置两个值，第一个参数表示X方向  第二个参数表示Y方向*/
    /*transform: translate(100px,100px);*/
    /*也可以只传入一个参数，表示X方向*/
    /*transform: translate(100px);*/
    /*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
    transform:translateY(100px);
}

2.scale()：缩放　
　　　　将元素根据中心原点进行缩放。跟translate()方法一样

 scaleX(x)：元素仅水平方向缩放（X轴缩放）
 scaleY(y)：元素仅垂直方向缩放（Y轴缩放）
 scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）

案例示例：

div:hover{
    /*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
    /*transform: scale(2,0.5);*/
    /*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
    /*transform: scale(2);*/
    /*也可以指定具体方向上的缩放*/
    transform: scaleX(2);
}

3.rotate()：旋转　
　　　　将元素相对中心原点进行旋转。这里的旋转是二维的，不涉及三维空间的操作
　　　　　　例如：transform:rotate(30deg);顺时针旋转30度　
案例示例：

div:hover{    
    /*传入旋转的角度，如果正值，则进行顺时针旋转*/
    /*transform: rotate(90deg);*/
    /*如果传入负值，则逆时针旋转*/
    transform: rotate(-270deg);
}

4.skew()：倾斜
　　　　和translate()方法、scale()使用方法相同

 skewX(x)：使元素在水平方向倾斜（X轴倾斜）
 skewY(y)：使元素在垂直方向倾斜（Y轴倾斜）
 skew(x,y)：使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜）

案例示例：

div:hover{  
    /*在X方向上倾斜30度*/  
    transform: skewX(30deg)；  
}

5.matrix()
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

transform 综合使用
　
例如：transform:rotate(30deg) translateX(100px) transform-origin:right center;

transform-origin: 允许你改变被转换元素的位置。

案例示例：

div{    
    width: 100px;
    height: 100px;
    margin: 100px auto;  
    background-color: red;    
    /*添加过渡*/
    transition:all .5s;
    /*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
    transform-origin: 0px 0px; 
}

div:hover{
    transform: scale(2);
}

过渡

作用：
在某个时间段可以显示css中某个属性值的变化过程。

语法：
transition:：属性 时间；

其参数的取值说明如下：

<transition-property>:定义用于过渡的属性；
<transition-duration>:定义过渡过程需要的时间（必选，否则不会产生过渡效果）
<transition-delay>:定义开始过渡的延迟时间；
<transition-timing-function>:定义过渡的方式；

1.指定过渡的属性 ( transition-property属性 )
transition-property的语法：transition-property：none | all | ;

其取值说明如下：

none：表示没有任何CSS属性有过渡效果；    
all：为默认值，表示所有的CSS属性都有过渡效果；    
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。 

2.指定过渡的时间（transition-duration属性）
transition-duration语法：transition-duration: time;

其取值说明：
time指定一个用逗号分隔的多个时间值，单位是秒(s)或毫秒(ms)。默认值是0，即是看不到过渡效果。

3.指定过渡延迟时间（transition-delay属性）
transition-delay语法：transition-delay:time;

其取值说明：
time的取值可以为秒(s)或毫秒(ms)。默认值为0，即是没有时间延迟，立即开始过渡效果。

4.指定过渡方式（transition-timing-function属性）
transition-timing-function语法：transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubiz-bezier(n,n,n,n);

其取值的说明如下：

linear: 表示匀速过渡；
ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；
ease-in: 表示过渡的速度先慢，后越来越快，直至结束；
ease-out: 表示过渡的速度先快，后越来越慢，直至结束；
ease-in-out: 表示过渡的速度在开始和结束时都很慢；
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。