CSS学习--使用 CSS transforms
使用 CSS transforms
CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。
transform-origin
transform-origin CSS属性让你更改一个元素变形的原点。
transform-origin: x-offset y-offset z-offset;offset: [ 2px | 2% | [top | right | bottom | left | center]]
transform
CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。
transform: [<transform-function> | none]
transform-function
| 变换类型 | 函数 | 描述 & 语法 |
|---|---|---|
| Matrix transformation | matrix() | CSS 函数matrix()用六个指定的值来指定一个均匀的二维（2D）变换矩阵。matrix(a, b, c, d, tx, ty) |
| matrix3d() | CSS 函数matrix3d()用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) | |
| Perspective | perspective() | perspective()这个CSS函数定义了 z=0平面与用户之间的距离，以便给三维定位元素一定透视度。perspective(<length>) |
| Rotation | rotate() | CSS 函数rotate() 定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如transform-origin属性所指定)。rotate(a) |
| rotate3d() | CSS 函数rotate3d()定义一个3D旋转功能，该旋转使元素能够绕固定轴移动而不变形。rotate3d(x, y, z, a) | |
| rotateX() | CSS 函数rotateX()定义了将元素在横坐标上旋转而不使其变形的方法。rotateX(a) | |
| rotateY() | CSS 函数rotateY()定义了将元素在纵坐标上旋转而不使其变形的方法。rotateY(a) | |
| rotateZ() | CSS 函数rotateZ()定义了将元素在z轴上旋转而不使其变形的方法。rotateZ(a) | |
| Scaling (resizing) | scale() | CSS 函数scale()可改变元素的大小。scale(sx[, sy]) |
| scale3d() | CSS 函数scale3d()可改变元素的大小。由于缩放的量由矢量定义，因此可以改变不同方向的尺寸。scale3d(sx, sy, sz) | |
| scaleX() | CSS函数scaleX()是用一个常数因子来修改每个单元点的横坐标，在比例因子是1的情况下该函数是恒等变换。scaleX(s) | |
| scaleY() | CSS函数scaleY()用一个常数因子修改每个元素点的纵坐标，在比例因子是1的情况下该函数是恒等变换。scaleY(s) | |
| scaleZ() | CSS函数scaleZ()是用一个常数因子来修改每个单元点的z轴坐标，在比例因子是1的情况下该函数是恒等变换。scaleZ(s) | |
| Skewing (distortion) | skew() | CSS函数skew()是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。skew(ax[, ay]) |
| skewX() | CSS函数skewX()是用于水平拉伸，它将元素的每个点在水平方向上扭曲一定角度。skewX(a) | |
| skewY() | CSS函数skewY()是用于垂直拉伸，它将元素的每个点在垂直方向上扭曲一定角度。skewY(a) | |
| Translation (moving) | translate() | CSS 函数translate()用于移动元素在平面上的位置。translate(tx[, ty]) |
| translate3d() | CSS 函数translate3d()用于移动元素在3D空间中的位置。translate3d(tx, ty, tz) | |
| translateX() | CSS 函数translateX()用于在平面上水平移动元素。translateX(t) | |
| translateY() | CSS 函数translateY()用于在平面上垂直移动元素。translateY(t) | |
| translateZ() | CSS 函数translateZ()用于3D空间的z轴方向移动元素，translateZ(t) |
transform: rotate(30deg);
transform-origin: 100% 100%;
