案例：制作正方体。
思路：通过transform属性，使六个面通过平移旋转得到最终效果。
效果展示：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<style>
.container {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
transform:rotate3d(1,1,1,30deg);
transform-style:preserve-3d;
}
.container div {
width: 200px;
height: 200px;
position: absolute;
opacity: 0.5;
}
.container .first {
background: blue;
transform:translateZ(100px);
}
.container .two {
background: green;
transform:translateZ(-100px);
}
.container .three {
background: pink;
transform:translateX(-100px) rotateY(90deg);
}
.container .four {
background: orange;
transform:translateX(100px) rotateY(90deg);
}
.container .five {
background: red;
transform:translateY(-100px) rotateX(90deg);
}
.container .six {
background: purple;
transform:translateY(100px) rotateX(90deg);
}
</style>
</head>
<body>
<div class="container">
<div class="first"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
</body>
</html>