); //沿着 Z 轴移动
格式举例：
（1）translateX 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:200px;height:200px;background:green;transition: all 1s;}.box:hover{transform: translateX(100px);}</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
效果：
（2）translateY 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:200px;height:200px;background:green;transition: all 1s;}.box:hover{transform: translateY(100px);}</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
效果：
（3）translateZ 举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {/* 给box的父元素加透视效果*/perspective:1000px;}.box{width:250px;height:250px;background:green;transition: all 1s;margin:200pxauto}.box:hover{/* translateZ必须配合透视来使用*/transform: translateZ(400px);}</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
效果：
上方代码中，如果不加透视属性，是看不到translateZ的效果的。
电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
格式有两种写法：
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
案例：立方体
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:250px;height:250px;border:1pxdashedred;margin:100pxauto;position:relative;border-radius:50%;/* 让子盒子保持3d效果*/transform-style: preserve-3d;/*transform:rotateX(30deg) rotateY(-30deg);*/animation: gun 8s linear infinite;}.box > div {width:100%;height:100%;position:absolute;text-align:center;line-height:250px;font-size:60px;color:#daa520;}.left{background-color:rgba(255, 0, 0, 0.3);/* 变换中心*/transform-origin:left;/* 变换*/transform: rotateY(90deg) translateX(-125px);}.right{background:rgba(0, 0, 255, 0.3);transform-origin:right;/* 变换*/transform: rotateY(90deg) translateX(125px);}.forward{background:rgba(255, 255, 0, 0.3);transform: translateZ(125px);}.back{background:rgba(0, 255, 255, 0.3);transform: translateZ(-125px);}.up{background:rgba(255, 0, 255, 0.3);transform: rotateX(90deg) translateZ(125px);}.down{background:rgba(99, 66, 33, 0.3);transform: rotateX(-90deg) translateZ(125px);}
@keyframes gun {0%{transform: rotateX(0deg) rotateY(0deg);}
100% {transform: rotateX(360deg) rotateY(360deg);}
}
</s