CSS变形

CSS

---

transform

transform:none|<transform-function>+

rotate（旋转）

rotate(<angle>)
transform:rotate(45deg);
transform:rotate(-60deg);
左手做出“赞”的姿势，大拇指指的方向为Z轴方向，其余各指握向rotate的正方向。

translate（移动）

translate(<translation-value><translation-value>?)
translateX/Y(<translation-value>)
transform:translateX(50px);
transform:translate(50px,20%);两个值分别为X,Y
百分比参照物为元素本身，右下为正

scale（缩放）

scale(<number> [,number]?)如果只有一个值的话则第二个值默认与第一个相等。
scaleX(<number>)
scaleY(<number>)
transform:scale(1.2);
transform:scale(1,1.2);

skew（倾斜）

skew(<angle>[,<angle>]?)
前者Y轴往X轴方向倾斜角度，后者相反。
skewX(<angle>)
skewY(<angle>)
transform:skew(30deg);
transform:skew(30deg,30deg);加倍

transform：<'transform-function>+

transform:translate(50%) rotate(45deg);
transform: rotate(45deg) translate(50%);
上面两个表示方法不一样，因为元素坐标轴会跟着移动旋转。

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>?
transform-origin:50% 50%; 默认值，在中心点。
transform-origin:0% 0%; 容器的最左上角。
transform-origin:20%; 第二个值默认为50%。
transform-origin:right(X最右) 50px(Y) 20px(Z);
transform-origin:top right 20px; 右上角，Z轴移动20px。

perspective（透视）

perspective:none|<length>
perspective:none;
perspective:2000px(人眼距物体的距离)；越近透视越明显。

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]]
perspective-origin:50% 50%; 在物体正中间透视，默认值
perspective-origin:left bottom; 从左下角透视，左下角透视效果最不明显。
如果只有一个值，则另外一个值默认50%。

translate3d() 3D移动

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

scale3d() 3D缩放

translate3d(<number>,<number>,<number>)
translateX(<number>)
translateY(<number>)
translateZ(<number>)
transform:scale3d(1.2,1.2,1);
transform:scaleZ(5); 发现元素并没有放大。因为它只是把Z轴变大了5倍，并没有影响宽和高。投影没改变，只是离你的远近改变。

rotate3d() 3D旋转

rotate3d(<number>,<number>,<number>)
rotateX(<angle>)
rotateY(<angle>)
rotateZ(angle>)
transform:rotate3d(1,0,0,45deg);以(0,0,0)与（1,0,0）为旋转轴旋转45deg.

transform-style

transform-style:flat(扁平化)|preserve-3d

backface-visibility(背面是否可见)

backface-visibility:visible|hidden