css:Transform

语法 transform:none|<transform-function>+

(1)rotate()旋转角度

rotate(<angle>)
eg.transform:rotate(45deg);

(2)translate()移动

translate(<translation-value>[,<translation-value>]?)
translateX(<translation-value>)
translateY(<translation-value>)
eg.
transform:translate(50px);x轴方向偏移50px
transform:translate(50px,20%);x轴方向偏移50px y轴20%
transform:translateX(-50px);
transform:translateY(-50px);

(3)scale()缩放

scale(<number>[,number>]?)
scaleX(<number>)
scaleY(<number>)
eg.transform:scale(1.2);整体放大1.2倍
transform:scale(1,1.2);高度进行了拉伸

(4)skew()倾斜

skew(<angle>[,<angle>]?)
skewX(<angle>)
skewY(<angle>)
transform:skew(30deg);Y轴向X周正方向倾斜30度
transform:skew(30deg,30deg);Y轴向X轴正方向倾斜30度,X轴向Y轴正方向倾斜30度
transform:translate(50%) rotate(45deg);顺序不同 结果不同

(5) transform-origin 重新定位原点

transform-origin:[left|center|right|top|bottom|<percentage>|<length>]
|
[left|center|right|<percentage>|<length>]
[top|center|bottom|<percentage>|<length>]<length>?
|
[center|[left|right]]&&[center|[top|bottom]]<length>?
X Y Z
eg.transform-origin:50% 50% 默认值 中心点
transform-origin:0 0;最左上角
transform-origin:20%;默认Y轴 50%
transform-origin:right 50px 20px;right最右 上50px Z轴正方向20px
transform-origin:top right 20px;top容器顶部 顶部最右 Z正方向20px

(6)perspective透视效果

perspective:none|<length>
perspective:none;
perspective:2000px;
perspective:500px;距离近 更明显

(6)-1 perspective-origin透视角度

perspective-origin:[left|center|right|top|bottom|<percentage>|<length>]
|
[left|center|right|<percentage>|<length>]
[top|center|bottom|<percentage>|<length>]
|
[center|[left|right]]&&[center|[top|bottom]]
eg.perspective-origin:50% 50%;默认
perspective-origin:left bottom;从左下角看
perspective-origin:50% -800px;中间上面的位置看
perspective-origin:right;右边中间的位置

(7)translate3d() 3D效果

translate3d(<translation-value>,<translation-value>,<length>)
translateX(<translation-value>)
translateY(<translation-value>)
translateZ(<length>)
eg.transform:translate3d(10px,20%,50px);

(8)scale3d()

scale3d(<number>,<number>,<number>)
scaleX(<number>)
scaleY(<number>)
scaleZ(<number>)
eg.transform:scale3d(1.2,1.2,1);

(9)rotate3d()

rotate3d(<number>,<number>,<number>,<angle>)
rotateX(<angle>)
rotateY(<angle>)
rotateZ(<angle>)
transform:rotate3d(1,0,0,45deg);取X轴上的1，与原点连线，以连线为轴旋转45度

(10)transform-style

transform-style:flat|preserve-3d

(11)backface-visibility 背面是否可见

backface-visibility:visible|hidden