位移
- 语法
- transform:translate3d(x,y,z);
- transform:translateX(值);
- transform:translateY(值);
- transform:translateZ(值);
- 取值
- 像素单位数值
- 百分比
- 取值
- 为何默认情况下,无法观察到Z轴位移效果 ?
- Z轴是视线方向,移动效果应该是距离的远或近,电脑显示屏是平面,默认无法查看远近效果。
添加透视即可查看Z轴效果
- 属性(添加给父级)
- perspective: 值;
- 取值:像素单位数值,数值一般在800 - 1200
- perspective: 值;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位移和透视</title>
<style>
body {
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 2s;
}
.box:hover {
transform: translateZ(200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>