3D动画实现。
1、3D移动
translate3d(x,y,z),使元素在这三个维度中移动，也可以分开写。
translateX(x), translateY(y), translateZ(z).
transform:translateX(100px); // X轴移动
2、3D缩放
scale3d(number, number, number), 也可以分开写：scaleX(), scaleY(), scaleZ().
3、3D旋转
rotate3D(x,y,z,angle), 指定需要进行旋转的坐标轴
rotateX(angle) 是元素按照X轴旋转。
rotateY(angle) 是元素按照y轴旋转。
rotateZ(angle) 是元素按照z轴旋转。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三位3d移动，旋转，缩放</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top: 10px;
/* 添加过渡 */
transition: transform 2s;
}
/* 添加3维移动,缩放，旋转 */
div:first-of-type:active {
transform: translate3d(00px, 00px, 400px);
}
div:nth-of-type(2):active {
transform: scale3d(2, 0.5, 2);
}
div:nth-of-type(3):active {
/* xyz： 代表xyz方向的一个向量值 */
transform: rotate3d(1, 1, 1, 360deg);
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>