前端课程——变形
变形
什么是变形
通过修改坐标，CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性，通过这些属性可以对HTML元素进行变形。可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。
在空间中实现CSS变形会稍微复杂一点。首先必须设置一个透视点(perspective) 来配置3D空间然后定义2D元素在空间中的变形。
关于变形的属性
transformtransform: none| <transform-list>属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换(
translate)旋转(rotate) 、缩放(scale)候斜(skew)。该CSS属性可用于内联元素和块级元素。其默认值为none,表示匹配元素不进行任何变形。
transorm-list:表示作用于元素的一个或多个变形的CSS函数。如果为多个函数的话，使用空格进行分隔。transform-originCSS属性让你更改一个元素变形的原点默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
- 一个值：
必须是， ，或 left,center,right,top,bottom关键字中的一个。
- 一个值：
两个值：
其中一个必须是， ，或 left,center,right关键字中的一个。
另一个必须是， ，或 top,center,bottom关键字中的一个。三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是。它始终代表Z轴偏移量。 transform-style设置元素的子元素是位于 3D 空间中还是平面中。
transform-style: flat | preserve-3dflat设置元素的子元素位于该元素的平面中。
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>当为父级设置时，元素会向左上角偏离。
- wechat
- alipay
