在学习h5时，3D的动画效果是初学者最喜欢钻磨的地方。下面有个立方体旋转案例，有助于理解运用animation和transform！
思路：
在容器中创建3D空间，把原本2d的块来进行
相应的旋转和位移，拼接成一个正方体。正方体旋转。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: black;
overflow: hidden;
}
/*父容器添加3D空间*/
ul{
width: 300px;
height: 300px;
/*border: white 1px solid;*/
position: relative;
margin:150px auto;
/*定义3D空间*/
transform-style: preserve-3d;
/* 添加旋转动画 */
animation: box 20s linear infinite;
}
/*关键帧 */
@keyframes box{
from{
transform: rotate3d(0,0,0,0deg);
}
to{
transform: rotate3d(1,1,1,360deg);
}
}
li{
width: 300px;
height: 300px;
border: 1px solid yellow;
color: white;
list-style: none;
/*拼接*/
position: absolute;
/*圆角*/
border-radius:20% ;
opacity: 0.7;
/*阴影*/
box-shadow: 0px 0px 100px white;
}
/*正面：红色*/
li:nth-child(1){
background: red;
/*位移*/
transform: translateZ(150px);
}
/*左边：黄色*/
li:nth-child(2){
background: yellow;
transform: rotateY(-90deg) translateZ(150px) ;
}
/*右边：蓝色*/
li:nth-child(3){
background: deepskyblue;
transform: rotateY(90deg) translateZ(150px);
}
/*上边：绿色*/
li:nth-child(4){
background: greenyellow;
transform: rotateX(90deg) translateZ(150px);
}
/*下边*/
li:nth-child(5){
background: orangered;
transform: rotateX(-90deg) translateZ(150px);
}
/*后面*/
li:nth-child(6){
background: palevioletred;
transform: translateZ(-150px);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>