<!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>
</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>
</div>
</body>
</html>
效果：
上方代码中，如果不加透视属性，是看不到translateZ的效果的。
3、透视：perspective电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
格式有两种写法：
作为一个属性，设置给父元素，作用于所有3D转换的子元素
作为 transform 属性的一个值，做用于元素自身。
4、3D呈现（transform-style）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);}
}
</style>
</head>
<body>
<div>
<div>上</div>
<div>下</div>
<div>左</div>
<div>右</div>
<div>前</div>
<div>后</div>
</div>
</body>
</html>
动画是CSS3中具有颠覆性的特征，可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果。
1、定义动画的步骤（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
之前,我们在 js 中定义一个函数的时候，是先定义，再调用：
js 定义函数：
functionfun(){ 函数体 }
调用：
fun();
同样，我们在 CSS3 中定义动画的时候，也是先定义，再调用：