通过修改坐标,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
关键字中的一个。
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; translate() 平移不脱离文档流
类似于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>
根据元素中心点缩放
scale(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: 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>
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>
skew
的值
<!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效果中,使用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> 当为父级设置时,元素会向左上角偏离。