CSS3 transform变换（2D 3D）

文章目录

一、2D变化
- 1.1. 2D位移
- 1.2. 2D缩放
- 1.3. 2D旋转
- 1.4. 2D扭曲（了解）
- 1.5. 多重变换
- 1.6. 变换原点
- 二、3D变化
- 2.1. 开启3D空间
- 2.2. 透视点位置
- 2.3. 3D 位移
- 2.4. 3D 旋转
- 2.5. 3D 缩放
- 2.6. 多重变换
- 2.7. 背部可见性

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

’

一、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 变换元素的自身上。

标签