CSS3转换（transform）

2D转换：

2D转换的方法：

函数	描述	例子:不同的浏览器 注意加前缀
translate()	沿x轴或y轴或xy轴移动元素	transform: translate(50px,100px);
rotate()	元素旋转角度，负为逆时针	transform: rotate(30deg);
scale()	元素尺寸的增加减少	transform: scale(2,4);
skew()	元素翻转一定的角度	transform: skew(30deg,20deg);
matrix()	把所有 2D 转换方法组合在一起：六个值的矩阵	transform:matrix(0.866,0.5,-0.5,0.866,0,0);

实例：

    



    
你好。这是一个 div 元素。

    
你好。这是一个 div 元素。

转换属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。

3D转换：

3D转换的方法：

函数	描述
translate3d(x,y,z)	沿xyz轴移动元素
translate3d(x)	沿x轴移动元素
translate3d(y)	沿y轴移动元素
translate3d(z)	沿z轴移动元素
rotate3d(x,y,z,angle)	元素旋转角度，负为逆时针
rotateX(angle)	x轴的旋转
rotateY(angle)	Y轴的旋转
rotateZ(angle)	Z轴的旋转
scale3d(x,y,z)	元素尺寸的增加减少:缩放转换
scaleX(x)	元素尺寸的增加减少
scaleY(y)	元素尺寸的增加减少
scaleZ(z)	元素尺寸的增加减少
perspective(n)	转换元素的透视视图
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	把所有 3D 转换方法组合在一起：使用 16 个值的 4x4 矩阵。

3D转换的属性：

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D中显示 (preserve-3d)子元素保留3D位置
perspective	规定3D元素的透视效果
perspective-origin	规定元素的底部位置
backface-visibility	定义元素在不面对屏幕时 是否可见

例子：

  

  

  




  

    Q
    I
    N
    G
    M
    E
    I
  

参考资料：http://www.w3school.com.cn/css3/css3_2dtransform.asp
参考资料：http://www.w3school.com.cn/css3/css3_3dtransform.asp
参考资料：http://www.html5tricks.com/html5-3d-letter-text.html