CSS3 transform变换（2D+3D）

前提：二维坐标系如下图所示

’

一、2D变化

1.1. 2D位移

2D 位移可以改变元素的位置，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值，相关可选值如下：
  

注意点：

• 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
• 与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
• 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
• 位移对行内元素无效。
• 位移配合定位，可实现元素水平垂直居中

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1.2. 2D缩放

2D 缩放是指：让元素放大或缩小，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值，相关可选值如下：
  

注意点：

• scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解。
• 借助缩放，可实现小于 12px 的文字。

1.3. 2D旋转

2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值，相关可选值如下：
  

1.4. 2D扭曲（了解）

2D 扭曲是指：让元素在二维平面内被“拉扯”，进而“走形”，实际开发几乎不用，了解即可，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值，相关可选值如下：
  

1.5. 多重变换

多个变换，可以同时使用一个transform来编写。
transform: translate(-50%, -50%) rotate(45deg)
注意点：多重变换时，建议最后旋转。

1.6. 变换原点

• 元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
• 修改变换原点对位移没有影响， 对旋转和缩放会产生影响。
• 如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
• 如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%

• transform-origin: 50% 50% ， 变换原点在元素的中心位置，百分比是相对于自身。—— 默认值
• transform-origin: left top ，变换原点在元素的左上角 。
• transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置。
• transform-origin: 0 ，只写一个值的时候，第二个值默认为 50% 。

二、3D变化

2.1. 开启3D空间

重要原则：元素进行 3D 变换的首要操作：父元素必须开启 3D 空间！

使用 transform-style 开启 3D 空间，可选值如下：

• flat ： 让子元素位于此元素的二维平面内（ 2D 空间）—— 默认值
• preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）

2.2. 透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。
使用 perspective-origin 设置观察者位置（透视点的位置），例如：

/* 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）
*/
perspective-origin: 400px 300px;

注意：通常情况下，我们不需要调整透视点位置。

2.3. 3D 位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值， 3D 相关可选值如下：
  

2.4. 3D 旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值， 3D 相关可选值如下：
  

2.5. 3D 缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：

• 先给元素添加 转换属性 transform
• 编写 transform 的具体值， 3D 相关可选值如下：
  

2.6. 多重变换

多个变换，可以同时使用一个 transform 来编写。
transform: translateZ(100px) scaleZ(3) rotateY(40deg);
注意点：多重变换时，建议最后旋转。

2.7. 背部可见性

使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：

• visible ： 指定元素背面可见，允许显示正面的镜像。—— 默认值
• hidden ： 指定元素背面不可见

注意： backface-visibility 需要加在发生 3D 变换元素的自身上。