第 24 章 CSS 变形

使用 transform 属性，我们可以改变元素的大小、位置以及形状。transform 属性有两套设置：二维和三维，这两套属性拥有不同的设置。

虽然浏览器对变形的支持还不是特别完美，但随着时间的推进，情况正在改善。最新版本的浏览器几乎都能支持 CSS 变形属性。

24.1 CSS 变形的语法

变形属性的语法特别简单，就是在 transform 属性后设置变形的值。例如：

div {
      transform: scale(1.5);
}

上例中的 div 元素，将在原有基础上放大 1.5 倍。

24.2 2D 变形

在 CSS3 中，元素可以在二维和三维空间中进行变形。二维变形在 x 轴和 y 轴，也就是水平和垂直方向进行；三维变形不但在 x 轴和 y 轴，还在 Z 轴上进行变形，三维变形不但可以改变元素长度和宽度，还可以调整元素的深度。下面我们先讨论 2D 变形。

24.2.1 2D 旋转

Transform 属性可以是旋转（rotate），通过设定 rotate 的值，可以旋转元素，正值为顺时针，负值则为逆时针，旋转时的默认原点为元素的中点，即水平和垂直方向的中点。如：

.box-1 {
        transform: rotate(20deg);
    }

.box-2 {
        transform: rotate(-55deg);
    }

24.3 2D 缩放

使用 scale 值，可以改变元素的比例。默认缩放比例为 1，因此，小于 1 的值会缩小，大于 1 的值会放大。scale 函数的值只有一个时，同时改变宽度和高度的比例，有两个值时，则分别表示宽度和高度的比例。还可以使用 scaleX 只改变元素的宽度，使用 scaleY 只改变元素的高度。例如：

.box-3 {
        transform: scale(0.5);
    }

.box-4 {
        transform: scale(0.5, 1.5);
    }

24.4 2D 位移

Translate 有点像相对定位，能够将元素在不脱离正常文档信息流的情况下，移动其位置。使用 translateX 可以只改变水平位置，使用 translateY 可以只改变垂直位置。当然，也可以分别指定，两个值用逗号隔开。

.box-5 {
    transform: translate(20px, 20%);
}

.box-6 {
    transform: translate(-50%);
}

位移的值可以是任何长度，单位常为像素或者百分比。translate 的值如果为正值，则向右移动，否则相反。

24.5 2D 倾斜

倾斜（skew）可以实现元素在水平或者垂直方向的变形，它的用法和 scale 和translate 相似。倾斜的值单位为角度。例如：

.box-7 {
    transform: skew(15deg);
}

.box-8 {
    transform: skewY(15deg);
}

.box-9 {
    transform: skew(15deg, 15deg);
}

24.6 变形组合

CSS 的变形值，还可以组合使用，比如既有旋转，还有缩放等等。多个变形值之间用空格隔开即可。例如：

transform: rotate(25deg) scale(.75);

24.7 设置变形的原点

前面已经提到，默认变形的原点是元素的中点。可以通过 transform-origin 属性设置变形的原点位置。

transform-origin 属性可以接受 1 个或 2 个值。只有 1 个时，这个值同时为水平和垂直方向使用。如果为两个值，则第一个为水平方向，第二个为垂直方向。

transform-origin 的值和背景图片的设置类似。

24.8 透视

为了使三维变形正常工作，就需要指定透视，所谓透视，指的是每个元素在视觉上的消失点，在三维空间的视角距离。

Perspective 属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。当值为 0 或负值时，无透视变换。例如：

.box-10 {
    transform: perspective(100px) rotateX(15deg);
}

.box-11 {
    transform: perspective(1100px) rotateX(15deg);
}

24.9 3D 旋转

三维变形不仅可以进行水平和垂直方向的变换，还可以改变物体的深度。之前，我们能在二维平面中顺时针或者逆时针旋转元素，现在，我们还可以在三个维度进行旋转。

使用 rotateX 值，可以使元素围绕 X 轴进行旋转；使用 rotateY 值，可以使得元素围绕 Y 轴进行旋转；使用 rotateZ 值，可使元素围绕 Z 轴进行旋转。

同样的，围绕某个轴进行旋转时，正值表示顺时针，而负值表示逆时针。

24.10 3D 缩放

使用 scaleZ，可使元素在 Z 轴方向进行缩放。

24.11 3D 位移

使用 translateZ 值，可使元素在 Z 轴方向位移。

24.12 变形风格

transform-style 属性决定变形是在二维还是三维空间中进行，有两个值：flat 和 preserve-3d，默认为 flat。

24.13 背部可见性

进行三维变形后，元素背部的内容，有时需要设定可见性，默认情况下，元素背部的值是可见的。如果要隐藏，则需要：

backface-visibility: hidden;

在线演示案例