使用 CSS 变形笔记

CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。

只有使用盒模型（Box Model）来定位的元素可以被变换（transformed）。，拥有 display: block 的元素是由盒模型定位的。

CSS transforms 属性
有两个主要的属性被用来定义 CSS transforms：transform 和 transform-origin
transform-origin
指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
transform
指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。
2D transform常用的transform-function的功能:

translate()：用来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。在此基础上有两个扩展函数：translateX()和translateY()。
scale()：用来缩小或放大元素，可以使用元素尺寸发生变化。在此基础上有两个扩展函数：scaleX()和scaleY()。
rotate()：用来旋转元素。
skew()：用来让元素倾斜。在此基础上有两个扩展函数：skewX()和skewY()。
matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。
3D transform常用的transform-function的功能:

translate3d()：移动元素，用来指定一个3D变形移动位移量。
translatez()：指定3Ｄ位移在Ｚ轴的位移量。
scale3d()：用来缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d()：指定元素具有一个三维旋转的角度。
rotateX()、rotateY()和rotateZ()：让元素具有一个旋转角度。
perspective()：指定一个透视投影矩阵。
matrix3d()：定义矩阵变形。