三、z轴平移

（一）translateZ

• 调整元素在 z 轴的位置
  • 正常情况就是调整元素和人眼之间的距离
  • 距离越大，表示元素离人越近
• z 轴平移属于立体效果【近大远小】
  • 默认情况下网页是不支持透视的，所以单独设置 translateZ 看不出效果

（二）perspective

• 如果需要透视效果，必须设置网页的视距
• 一般设置 html 的 perspective 属性

html {
  /* 设置当前网页的视距为800px，即：人眼距离网页的距离 */
  perspective: 800px;
}
body {
  border: 1px solid red;
  background-color: rgb(240, 240, 240);
}
.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
  margin:: 200px auto;
  transition: 2s;
}
body:hover .box1 {
  transform: translateZ(100px);
}