z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，其值越大，元素离人越近。z轴平移属于立体效果，默认情况下网页是不支持透视的，如果需要看见效果，必须要设置网页的视距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
border: 1px red solid;
/*
设置【人眼】到【body元素】的视距为800px，
与现实一样，距离越远的东西看起来越小，
所以perspective的值越大，body元素内部的东西就看起来越小。
*/
perspective: 800px;
}
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
transition: 2s;
}
body:hover .box1 {
/*
相对于自身的Z轴进行平移，人眼面对电脑，相当于俯视看网页，
所以translateZ的值增大，其会在3D空间内向上平移，
我们看电脑时也就能看到此元素在变大，因为它在向我们靠近
*/
transform: translateZ(400px);
}
/*
默认情况下，z轴是对着我们人眼的，
这是在没有旋转元素的前提下，
如果旋转了元素，那么整个坐标轴都会旋转，
比如我将元素向左旋转180°，那么此时的z轴对着的是左侧
*/
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
