CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

DANGER

只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。行内元素是无法进行形变的。

transform-function

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transform的值可以设置为none， 或者多种形变效果，用空格分隔。

matrix的6个值分别是 matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )的意思。可惜把大学学的线性代数忘记的差不多了， 不然会二维矩阵知识的话，理解的更好。

transform-origin

transform-origin CSS 属性让你更改一个元素变形的原点。

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;

transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。没有明确定义的偏移将重置为其对应的初始值(一般的默认值是center)。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

• 一个值：
  • 必须是 length,percentage或 left, center, right, top, bottom关键字中的一个。
• 两个值：
  • 其中一个必须是 length,percentage或 left, center, right, 关键字中的一个。
  • 另一个必须是 length,percentage或 center, top, bottom关键字中的一个。
• 三个值：
  • 前两个值和只有两个值时的用法相同。
  • 第三个值必须是length。它始终代表 Z 轴偏移量。

一些作用和原理

1. transform: translateZ(0px);

   一般不会产生样式上的效果， 主要用于在移动端开启GPU加速。这个加速其实就是优化重绘的性能，因为 transform不会触发重绘， 减少CPU参与计算，利用GPU进行渲染， 比如在图片的放大， 滚动，轮播等操作中。