CSS3学习笔记：转换Transform

1. 2D转换

1.1 旋转rotate

语法：transform:rotate(<角度>)
正角度表示顺时针，逆角度表示逆旋转

transform:rotate(-8deg);

1.2 移动translate

水平移动 translateX(200px)
竖直移动 translateY(200px)
水平竖直均缩放 translate(200px,200px)

1.3 缩放scale

水平缩放 scaleX(0.5)，参数为缩放倍数，以水平中线为轴进行缩放
竖直缩放 scaleX(0.5)，参数为缩放倍数，以竖直中线为轴进行缩放

1.4 扭曲skew

斜切扭曲（围绕几何中心）
水平方向扭曲变形 skewX(角度)
竖直方向扭曲变形 skewY(角度)
双方向扭曲变形 skew(角度,角度),若第二个参数没有，则竖直方向不进行斜切

2. 3D转换

3D转换没有斜切
旋转 rotate3d() ：
rotateX(角度)，绕竖直方向中间轴旋转；
rotateY(角度)，绕水平方向中间轴旋转；
rotateZ(角度)，绕水平方向中间轴旋转；
rotate3d(x,y,z,angle) 参数不允许省略
平移translate3d():
translateZ() ，看起来不会有效果，但其实是相对于屏幕距离眼睛更近了一点，经常用于遮罩。
translate3d(x,y,z) 参数不允许省略
缩放scale3d()：
scaleZ(倍数)，看起来不会有效果，实际上是厚度发生变化
scale3d(x,y,z) 参数不允许省略

3. Transform与坐标系统

transform-origin属性
允许更改转换元素的位置
语法：transform-origin:x-axis y-axis z-axis;
例如：transform-origin:left top; 围绕左上角变换

4. CSS3矩阵

5. transform-style属性

transform-style属性指定嵌套元素怎样在三维空间中呈现
语法：transform-style:flat|preserve-3d
默认值为flat

6. perspective属性

perspective属性，指定观察者与z=0平面的距离，使具有三位位置变换的元素产生透视效果。
语法:perspective:number|none;

perspective-origin属性，指定透视点的位置。
语法：perspective-origin:x-axis y-axis;
默认值：perspective-origin:50% 50%;

7.backface-visibility属性

指定元素背面面向用户时是否可见
语法：backface-visibility:visible|hidden;
visible透明，hidden不透明
默认值：visible