前端课程——变形

Dreamy.TZK

发布于 2020-04-09 14:33:31

1K0

发布于 2020-04-09 14:33:31

变形

什么是变形

通过修改坐标，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缩放

缩放

根据元素中心点缩放

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>

改变中心点

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

可以使用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属性，即平面与观察者之间的距离。

当设置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>

当给父级设置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> 当为父级设置时，元素会向左上角偏离。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-03-03，如有侵权请联系 cloudcommunity@tencent.com 删除

css