必须加这个属性：transform-style: preserve-3d;
perspective: 900px; 设置了景深才能感到近大远小的感觉
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 500px;height: 500px;border: 5px solid black;transform-style: preserve-3d;/* 必加transform-style: preserve-3d; 默认是flat:2d;*/position: relative;margin: 0 auto;/* transform: rotateY(30deg);*/perspective: 900px;/* 设置景深 */}.center{position:absolute;width: 200px;height: 200px;background: red;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;transition: all 3s;}.box:hover .center{/* transform: translateZ(800px); */transform: translate3d(0,0,200px);/* 正值朝前，负值朝后 */}</style>
</head>
<body><div class="box"><div class="center"></div></div>
</body>
</html>transform: translateZ(80px); 等于transform: translate3d(0,0,80px);，里面的参数对应x,y,z轴
