1.CSS3 2D转换
通过CSS3转换，能够对元素进行移动、缩放、转动、拉长或拉伸。
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 */
}
（1）translate() 方法
通过translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标）和 top（y 坐标）位置参数：
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 */
}
值translate(50px,100px) 把元素从左侧移动50像素，从顶端移动100像素。
（2）rotate() 方法
通过rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
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 */
}
值rotate(30deg) 把元素顺时针旋转30度。
（3）scale() 方法
通过scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
值scale(2,4) 把宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍。
（4）skew() 方法
通过skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
值skew(30deg,20deg) 围绕X轴把元素翻转30度，围绕Y轴翻转20度。
（5）matrix() 方法
matrix() 方法把所有2D转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。
如何使用matrix方法将div元素旋转30度：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}
（6）新的转换属性
属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3
2D Transform 方法
函数 描述
matrix(n,n,n,n,n,n) 定义2D转换，使用六个值的矩阵。
translate(x,y) 定义2D转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义2D转换，沿着 X 轴移动元素。
translateY(n) 定义2D转换，沿着 Y 轴移动元素。
scale(x,y) 定义2D缩放转换，改变元素的宽度和高度。
scaleX(n) 定义2D缩放转换，改变元素的宽度。
scaleY(n) 定义2D缩放转换，改变元素的高度。
rotate(angle) 定义2D旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义2D倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义2D倾斜转换，沿着 X 轴。
skewY(angle) 定义2D倾斜转换，沿着 Y 轴。
2.CSS3 3D转换
CSS3允许您使用3D转换来对元素进行格式化。
（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 */
}
（3）转换属性
属性 描述 CSS
transform 向元素应用2D或3D转换。 3
transform-origin 允许你改变被转换元素的位置。 3
transform-style 规定被嵌套元素如何在3D空间中显示。 3
perspective 规定3D元素的透视效果。 3
perspective-origin 规定3D元素的底部位置。 3
backface-visibility 定义元素在不面对屏幕时是否可见。 3
（4）2D Transform 方法
函数 描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义3D转换，使用16个值的 4x4 矩阵。
translate3d(x,y,z) 定义3D转化。
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转换元素的透视视图。