- 2D 变形
- transformrotate()
- transform-origin
- translate()
- scale()
- skew()
- 3D 变形
- rotateY()
- perspective
- perspective-origin
- translate3d()
- scale3d()
- rotate3d()
- transform-style
- backface-visibility
变形
2D 变形
transform
transform 中可以写一个或多个方法。
transform: none | +
transform: none
transform: +
transform: translate(50%) rotate(45deg);
transform: rotate(45deg) transform(50%)
transform-transform-function.png
rotate()
rotate()
rotate(45deg);
rotate(-60deg);
transform-rotate.png
transform-origin
其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%）
transform-origin: [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] ?
transform-origin: 50% 50%;
transform-origin: 0 0;
transform-origin: right 50px 20px;
transform-origin: top right 20px;
transform-origin.png
translate()
移动方法，参数分别代表 X 与 Y 轴的移动（偏移值均可为负值）。
translate([, ]?)
translationX()
translationY()
transform: translate(50px);
transform: translate(50px, 20%);
transform: translate(-50px);
transform: translate(20%);
transform-traslate.png
scale()
缩放方法，参数分别代表 X 与 Y 轴的缩放（缩放值均可为小数）。当第二值忽略时，默认设置为等同第一值。
scale( [, ]?)
scaleX()
scaleY()
transform: scale(1.2);
transform: scale(1, 1.2);
transform: scaleX(1.2);
transform: scaleY(1.2);
transform-scale.png
skew()
其为倾斜的方法。第一值为 Y 轴往 X 方向倾斜（逆时针），第二值为 X 轴往 Y 方向倾斜（顺时针）。（倾斜值可为负值）
skew([, ]?)
skewX()
skewY()
transform: skew(30deg);
transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);
transform-skew.png
3D 变形
rotateY()
3D 空间旋转。
transform: rotateY()
perspective
perspective-3d.PNG
其用于设置图片 Y 轴旋转后的透视效果。
perspective: none |
perspective: none;
perspective: 2000px;
perspective: 500px;
transform-perspective.png
perspective-origin
其为设定透视的角度（透视位置均可设定为负值）。
perspective-origin: [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ]
perspective-origin: 50% 50%
perspective-origin: left bottom;
perspective-origin: 50% -800px;
perspective-origin: right;
transform-perspective-origin.png
translate3d()
translate3d(, , )
translateX()
translateY()
translateZ()
transform: translate3d(10px, 20%, 50px);
transform: translateX(10px);
transform: translateY(20%);
transform: translateZ(-100px);
transform-translate3d.png
scale3d()
scale3d(, , )
scaleX()
scaleY()
scaleZ()
transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1, 1.2, 1);
transform: scale3d(1.2, 1, 1);
transform: scaleZ(5);
transform-scale3d.png
rotate3d()
取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。
rotate3d(, , , )
rotateX()
rotateY()
rotateZ()
transform: rotate3d(1, 0, 0, 45deg);
transform: rotate3d(0, 1, 0, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(1, 1, 1, 45deg);
transform-rotate3d.png
transform-style
其用于设置保留内部的 3D 空间，原因是一个元素进行transform之后内部默认为flat。
transform-style: flat | perserve-3d
transform-style: flat;
transform-style: preserve-3d;
transform-transform-style.png
backface-visibility
其用于设置背面不可见。
backface-visibility: visible | hidden
backface-visibility: visible;
backface-visibility: hidden;
transform-backface-visibility.png