变形

什么是变形

通过修改坐标,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 属性的消失点。

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

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

    其只有两个值

    backface-visibility: visible;
    backface-visibility: hidden;

2D变形

2D平移

translate() 平移不脱离文档流

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

类似于position设置为relative

<!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,表示放大

    • 注意

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

<!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等)

移动后的效果:

不移动的效果:

代码

<!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。

    • 正值

      顺时针旋转

    • 负值

      逆时针旋转

<!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轴

<!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设置)。

    <!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属性时。

    <!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>

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