css3 2D 3D 过渡

1.Css32D转换（translate，rotate，scale，skew，matrix）

转换方法：

1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
Eg：translate(50px,100px) 是从左边元素移动50个像素，并从顶部移动向下100像素。
2.rotate( )方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。（正值顺时针旋转，负值逆时针旋转）
Eg:rotate值（30deg）元素顺时针旋转30度。
3.scale( )方法，将该元素放大或缩小，取决于宽度（X轴）和高度（Y轴）的参数。
Eg：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
4.skew( )方法，包含两个参数值，分别表示是X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
Eg：skew(30deg,20deg) 元素在X轴倾斜20度，Y轴倾斜上30度。
5.matrix( )方法，matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
Eg：transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix(n,n,n,n,n,n 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着X轴和Y轴移动的元素
scale(x,y) 定义 2D 缩放转换,改变元素的宽和高的放大或缩小倍数
skew(x,y) 沿着X轴和Y轴倾斜角度
rotate(angle) 定义 2D 旋转，在参数中规定角度，只有一个参数

2.Css3 3D转换(translate,scale,rotate)

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

backface-visibility 属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。
backface-visibility: visible/hidden; visible 背面是可见的.hidden背面是不可见的。

3.Css3过渡(transition)

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性。

指定效果的持续时间。

1. transition 单个元素
例如：transition: width 2s;是指当鼠标指针悬浮(:hover)于 <div>元素上时是指达到指定宽度要两秒。当鼠标光标移动到该元素时，它逐渐改变它原有样式。
2.transition 多个元素 要添加多个样式的变换效果，添加的属性由逗号分隔：
例如：transition: width 2s, height 2s, transform 2s;当鼠标悬浮，同时开始宽度，高度，以及转换。

<style> 
div { width: 100px;
     height: 100px;
     background: red;
     transition: width 2s, height 2s, transform 2s;}
div:hover {
    width: 200px;/*宽度从100px放大到200px需要两秒*/
    height: 200px;/*长度从100px放大到200px需要两秒*/
    transform: rotate(180deg);}/*顺时针180度旋转*/
</style>

<style>
div{   width:100px;
    height:100px;
    background:red;
    transition-property:width; /*规定应用过渡的 CSS 属性的名称。*/
    transition-duration:1s;/* 定义过渡效果花费的时间。默认是 0。（1s达到效果）*/
    transition-timing-function:linear;/*规定过渡效果的时间曲线。默认是 "ease"。*/
    transition-delay:2s;/*规定过渡效果何时开始。默认是 0. （延迟两秒）*/
}
div:hover{
    width:200px;
}
</style>

简写方式：

<style> 
div{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s height 1s  linear 2s;/*宽度一秒，长度一秒*/
}
div:hover{
    width:200px;
    height:200px;
}

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。（1s达到效果）
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。transition-delay 规定过渡效果何时开始。默认是 0.