3.1 2D变换

3.1.1 2D位移

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

  1. 先给元素添加 转换属性 transform
  2. 编写transform的具体值

注意点：

  1. 位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
  2. 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。
  3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
  4. transform 可以链式编写，如：transform: translateX(30px) translateY(40px);
  5. 位移对行内元素无效。
  6. 位移配合定位，可实现元素水平垂直居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_位移</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            /* 水平位移 */
            /* transform: translateX(50px); */

            /* 垂直位移 */
            /* transform: translateY(50px); */

            /* 水平+垂直位移 */
            /* transform: translate(50px,50px); */
        }

        .inner2 {
            width: 60px;
            height: 60px;
            background-color: orange;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">你好啊</div>
    </div>

    <div class="outer">
        <div class="inner2">你好啊</div>
    </div>
</body>
</html>

3.1.2 2D缩放

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

  1. 先给元素添加 转换属性 transform
  2. 编写transform的具体值

注：借助缩放，可实现小于 12px 的文字。

3.1.3 2D旋转

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

  1. 先给元素添加 转换属性 transform
  2. 编写transform的具体值

注意： rotateZ(20deg) 相当于 rotate(20deg) ，

在平面上实现旋转应用rotateZ

3.1.4 2D扭曲

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

  1. 先给元素添加 转换属性 transform
  2. 编写transform的具体值

3.1.5 多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translate(-50%, -50%) rotate(45deg);

一般都要把旋转放在最后来写，因为旋转后轴的方向会发生变化。

3.1.5 变换原点

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

注：

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

3.2 3D变换

3.2.1 开启3D空间

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

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

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

3.2.2 设置景深

何为景深？—— 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立体。

使用 perspective 设置景深，可选值如下：

  • none ： 不指定透视 ——（默认值）
  • 长度值 ： 指定观察者距离 z=0 平面的距离，不允许负值。

注意： perspective 设置给发生 3D 变换元素的父元素！

3.2.3 透视点位置

实质上是camera位置。

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

使用 perspective-origin 设置观察者位置（透视点的位置），例如：

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

3.2.4 3D 位移

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

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

3.2.5 3D 旋转

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

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

3.2.6 3D缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，但html元素没有厚度，所以会在景深上做调整，具体使用方式如下：

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

3.2.7 多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translateZ(100px) scaleZ(3) rotateY(40deg);

注意点：多重变换时，建议最后旋转。

3.2.8 背部可见性

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

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

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

License

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

Share

快来参与讨论吧~