2D 变形

    transform

    中可以写一个或多个方法。

    rotate()
    1. rotate(<angle>)
    3. rotate(45deg);
    4. <!-- 右边旋转，顺时针 -->
    5. rotate(-60deg);
    6. <!-- 左边旋转，逆时针 -->

    变形 - 图2

    transform-origin

    其用于设置原点的位置（默认位置为元素中心）第一值为 X 方向，第二值为 Y 方向， 第三值为 Z 方向。（当值空出未写的情况下默认为 50%）

    1. transform-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?
    3. <!-- 默认值为 50% 50% -->
    5. transform-origin: 50% 50%;
    6. transform-origin: 0 0;
    7. transform-origin: right 50px 20px;
    8. transform-origin: top right 20px;

    translate()

    移动方法，参数分别代表 X 与 Y 轴的移动（偏移值均可为负值）。

    1. translate(<translation-value>[, <translation-value>]?)
    2. <!-- 也可单独设置 X 与 Y 轴的偏移 -->
    3. translationX(<translation-value>)
    4. translationY(<translation-value>)
    6. transform: translate(50px);
    7. transform: translate(50px, 20%);
    8. <!-- Y 轴偏移为偏移对象的高度，X 轴为宽度 -->
    9. transform: translate(-50px);
    10. transform: translate(20%);

    变形 - 图4

    scale()

    缩放方法，参数分别代表 X 与 Y 轴的缩放（缩放值均可为小数）。当第二值忽略时，默认设置为等同第一值。

    skew()

    其为倾斜的方法。第一值为 Y 轴往 X 方向倾斜（逆时针），第二值为 X 轴往 Y 方向倾斜（顺时针）。（倾斜值可为负值）

    1. skew(<angle>[, <angle>]?)
    3. skewX(<angle>)
    4. skewY(<angle>)
    6. transform: skew(30deg);
    7. transform: skew(30deg, 30deg);
    8. transform: skewX(30deg);
    9. transform: skewY(30deg);

    3D 变形

    rotateY()

    3D 空间旋转。

    1. transform: rotateY(<angle>)
    perspective

    变形 - 图7

    其用于设置图片 Y 轴旋转后的透视效果。<length> 可以理解为人眼与元素之间的距离，越紧则效果越明显。

    1. perspective: none | <length>
    3. perspective: none;
    4. perspective: 2000px;
    5. perspective: 500px;

    perspective-origin

    其为设定透视的角度（透视位置均可设定为负值）。

    translate3d()
    1. translate3d(<translate-value>, <translate-value>, <length>)
    3. translateX(<translate-value>)
    4. translateY(<translate-value>)
    5. translateZ(<length>)
    7. transform: translate3d(10px, 20%, 50px);
    8. transform: translateX(10px);
    9. transform: translateY(20%);
    10. transform: translateZ(-100px);

    变形 - 图10

    scale3d()
    1. scale3d(<number>, <number>, <number>)
    3. scaleX(<number>)
    4. scaleY(<number>)
    5. scaleZ(<number>)
    7. transform: scale3d(1.2, 1.2, 1);
    8. transform: scale3d(1, 1.2, 1);
    9. transform: scale3d(1.2, 1, 1);
    10. transform: scaleZ(5);
    11. <!-- Z 轴的缩放扩大并不影响盒子大小 -->

    rotate3d()

    取 X Y Z 三轴上的一点并于坐标原点连线，以连线为轴进行旋转（逆时针）。

    1. rotate3d(<number>, <number>, <number>, <angle>)
    3. rotateX(<angle>)
    4. rotateY(<angle>)
    5. rotateZ(<angle>)
    7. transform: rotate3d(1, 0, 0, 45deg);
    8. <!-- 上面等同于 X 轴旋转 -->
    9. transform: rotate3d(0, 1, 0, 45deg);
    10. <!-- 上面等同于 Y 轴旋转 -->
    11. transform: rotate3d(0, 0, 1, 45deg);
    12. <!-- 上面等同于 2D 旋转 -->
    13. transform: rotate3d(1, 1, 1, 45deg);

    变形 - 图12

    transform-style

    其用于设置保留内部的 3D 空间，原因是一个元素进行transform之后内部默认为flat。

    backface-visibility

    其用于设置背面不可见。

    1. backface-visibility: visible | hidden
    4. backface-visibility: hidden;

    变形 - 图14