变形

什么是变形

通过修改坐标，CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性，通过这些属性可以对HTML元素进行变形。可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。
在空间中实现CSS变形会稍微复杂一点。首先必须设置一个透视点(perspective) 来配置3D空间然后定义2D元素在空间中的变形。

关于变形的属性

  • transform

    transform: none| <transform-list>

    属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换(translate)旋转(rotate) 、缩放(scale)候斜(skew)。

    该CSS属性可用于内联元素和块级元素。其默认值为none,表示匹配元素不进行任何变形。

    transorm-list:表示作用于元素的一个或多个变形的CSS函数。如果为多个函数的话，使用空格进行分隔。

  • transform-origin

    CSS属性让你更改一个元素变形的原点默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。

    • 一个值：
      必须是，，或 left, center, right, top, bottom关键字中的一个。

  • 两个值：
    其中一个必须是，，或left, center, right关键字中的一个。
    另一个必须是，，或top, center, bottom关键字中的一个。

  • 三个值：
    前两个值和只有两个值时的用法相同。
    第三个值必须是。它始终代表Z轴偏移量。

  • transform-style

    设置元素的子元素是位于 3D 空间中还是平面中。

    transform-style: flat | preserve-3d

    • flat

      设置元素的子元素位于该元素的平面中。

    • preserve-3d

      指示元素的子元素应位于 3D 空间中。

  • perspective

    指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

    三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。

    默认情况下，消失点位于元素的中心，但是可以通过设置 perspective-origin 属性来改变其位置。

  • perspective-origin

    指定了观察者的位置，用作 perspective 属性的消失点。

    1
    2
    3
    4
    5
    /* 一个值的时候 */
    perspective-origin: x-position;

    /* 两个值的时候 */
    perspective-origin: x-position y-position;

  • backface-visibility

    元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

    其只有两个值

    1
    2
    backface-visibility: visible;
    backface-visibility: hidden;

2D变形

2D平移

translate（） 平移不脱离文档流

  • x:表示水平方向
  • y:表示垂直方向

类似于position设置为relative

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: lightcoral;
            transform: translate(100px,100px);
        }
        .test{
            width: 200px;
            height: 200px;
            background: lightskyblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="test"></div>
</body>
</html>

2D缩放

  1. 缩放

根据元素中心点缩放

scale（X,Y）缩放

  • X表示水平方向

  • Y表示垂直方向

  • 值范围

    • 0~1之间的值，表示缩小

    • 大于1，表示放大

    • 注意

      以元素中心点为核心进行缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: lightcoral;
            transform: scale(0.5,0.5);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
  1. 改变中心点

缩放的默认中心点为元素中心，并不是左上角。

可以使用transform-origin属性，可以使用像素单位，厘米单位以及关键字（left,top等）

移动后的效果：

不移动的效果：

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: lightcoral;
            transform: scale(1.5,1.5);
            transform-origin: left top;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2D旋转

rotate()函数用于通过指定的角度将元素根据原点进行旋转。该函数主要用于2D空间进行旋转。如果该角度值为正值的话，表示顺时针旋转;如果该角度值为负值的话，则表示逆时针旋转。
rotate(angle) 其中：

  • angle:表示旋转的角度值，单位为deg。

    • 正值

      顺时针旋转

    • 负值

      逆时针旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: lightcoral;
            margin: 200px 200px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2D倾斜

skew的值

  • 一个值为X轴旋转
  • 两个值
    • 第一个值代表X轴
    • 第二个值代表Y轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: lightpink;
            margin: 200px 200px;
            transform: skew(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

倾斜的过程（从零开始逐渐往上加）

3D变形

在3D效果中，使用X与Y属性与2D效果类似。唯一不同的是Z的属性。使用Z的属性需要添加perspective属性，即平面与观察者之间的距离。

  1. 当设置perspective为元素自身时（即给粉色div设置）。

    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
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                position: relative;
                width: 60px;
                height: 60px;
                left: 100px;
                background-color: skyblue;
            }
            /* 
                实现3D效果的平移，必须要在 transform 属性的值包含
                    perspective(): 表示z=0的平面与观察者之间的距离
             */
            .moved {
                transform: perspective(500px) translateZ(200px);
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <div>第一个div</div>
        <div class="moved">第二个div</div>

    </body>

    </html>

  2. 当给父级设置perspective属性时。

    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
    <!DOCTYPE html>
    <html lang="en">

        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style>
                .container{
                    width: 500px;
                    height: 300px;
                    border: 1px solid gray;
                    perspective: 500px;
                }
                .static {
                    position: relative;
                    width: 60px;
                    height: 60px;
                    left: 100px;
                    background-color: skyblue;
                }
                /* 
                实现3D效果的平移，必须要在 transform 属性的值包含
                perspective(): 表示z=0的平面与观察者之间的距离
                */
                .moved {
                    transform: translateZ(200px);
                    background-color: pink;
                }
            </style>
        </head>

        <body>
            <div class="container">
                <div class="static">第一个div</div>
                <div class="static moved">第二个div</div>
            </div>
        </body>

    </html>

    当为父级设置时，元素会向左上角偏离。