CSS变形
使用 transform 属性，我们可以改变元素的大小、位置以及形状。transform 属性有两套设置：二维和三维，这两套属性拥有不同的设置。
虽然浏览器对变形的支持还不是特别完美，但随着时间的推进，情况正在改善。最新版本的浏览器几乎都能支持 CSS 变形属性。
CSS 变形的语法
变形属性的语法特别简单，就是在 transform 属性后设置变形的值。例如：
div {
transform: scale(1.5);
}上例中的 div 元素，将在原有基础上放大 1.5 倍。
2D 变形
在 CSS3 中，元素可以在二维和三维空间中进行变形。二维变形在 x 轴和 y 轴，也就是水平和垂直方向进行；三维变形不但在 x 轴和 y 轴，还在 Z 轴上进行变形，三维变形不但可以改变元素长度和宽度，还可以调整元素的深度。下面我们先讨论 2D 变形。
2D 旋转
Transform 属性可以是旋转（rotate），通过设定 rotate 的值，可以旋转元素，正值为顺时针，负值则为逆时针，旋转时的默认原点为元素的中点，即水平和垂直方向的中点。如：
.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}2D 缩放
使用 scale 值，可以改变元素的比例。默认缩放比例为 1，因此，小于 1 的值会缩小，大于 1 的值会放大。scale 函数的值只有一个时，同时改变宽度和高度的比例，有两个值时，则分别表示宽度和高度的比例。还可以使用 scaleX 只改变元素的宽度，使用 scaleY 只改变元素的高度。例如：
.box-3 {
transform: scale(0.5);
}
.box-4 {
transform: scale(0.5, 1.5);
}2D 位移
Translate 有点像相对定位，能够将元素在不脱离正常文档信息流的情况下，移动其位置。使用 translateX 可以只改变水平位置，使用 translateY 可以只改变垂直位置。当然，也可以分别指定，两个值用逗号隔开。
.box-5 {
transform: translate(20px, 20%);
}
.box-6 {
transform: translate(-50%);
}位移的值可以是任何长度，单位常为像素或者百分比。translate 的值如果为正值，则向右移动，否则相反。
2D 倾斜
倾斜（skew）可以实现元素在水平或者垂直方向的变形，它的用法和 scale 和translate 相似。倾斜的值单位为角度。例如：
.box-7 {
transform: skew(15deg);
}
.box-8 {
transform: skewY(15deg);
}
.box-9 {
transform: skew(15deg, 15deg);
}变形组合
CSS 的变形值，还可以组合使用，比如既有旋转，还有缩放等等。多个变形值之间用空格隔开即可。例如：
transform: rotate(25deg) scale(.75);设置变形的原点
前面已经提到，默认变形的原点是元素的中点。可以通过 transform-origin 属性设置变形的原点位置。
transform-origin 属性可以接受 1 个或 2 个值。只有 1 个时，这个值同时为水平和垂直方向使用。如果为两个值，则第一个为水平方向，第二个为垂直方向。
transform-origin 的值和背景图片的设置类似。
透视
为了使三维变形正常工作，就需要指定透视，所谓透视，指的是每个元素在视觉上的消失点，在三维空间的视角距离。
Perspective 属性指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。当值为 0 或负值时，无透视变换。例如：
.box-10 {
transform: perspective(100px) rotateX(15deg);
}
.box-11 {
transform: perspective(1100px) rotateX(15deg);
}3D 旋转
三维变形不仅可以进行水平和垂直方向的变换，还可以改变物体的深度。之前，我们能在二维平面中顺时针或者逆时针旋转元素，现在，我们还可以在三个维度进行旋转。
使用 rotateX 值，可以使元素围绕 X 轴进行旋转；使用 rotateY 值，可以使得元素围绕 Y 轴进行旋转；使用 rotateZ 值，可使元素围绕 Z 轴进行旋转。
同样的，围绕某个轴进行旋转时，正值表示顺时针，而负值表示逆时针。
3D 缩放
使用 scaleZ，可使元素在 Z 轴方向进行缩放。
3D 位移
使用 translateZ 值，可使元素在 Z 轴方向位移。
变形风格
transform-style 属性决定变形是在二维还是三维空间中进行，有两个值：flat 和 preserve-3d，默认为 flat。
背部可见性
进行三维变形后，元素背部的内容，有时需要设定可见性，默认情况下，元素背部的值是可见的。如果要隐藏，则需要：
backface-visibility: hidden;