立方体的实现
今天老师给我们讲了立方体的实现，但有些地方比较模糊，那位大神能帮我看看，指点指点，有没有一种简单的方式让多数人都明白！代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.square{
/*border: 1px solid black;*/
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
animation: rotate 5s linear infinite;
}
@keyframes rotate{
from{ transform: rotateX(0deg) rotateY(odeg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.square div:nth-child(1){
background: skyblue;
/*透明度0-1 0是完全透明 1是完全不透明*/
opacity: 0.5;
/*translate位移*/
transform: rotateY(0deg) translateZ(100px);
}
.square div:nth-child(2){
background: orange;
opacity: 0.5;
transform: rotateY(90deg) translateZ(100px);
}
.square div:nth-child(3){
background: red;
opacity: 0.5;
transform: rotateY(180deg) translateZ(100px);
}
.square div:nth-child(4){
background: pink;
opacity: 0.5;
transform: rotateY(270deg) translateZ(100px);
}
.square div:nth-child(5){
background: green;
opacity: 0.5;
transform: rotateX(90deg) translateZ(100px);
}
.square div:nth-child(6){
background: yellow;
opacity: 0.5;
transform: rotateY(270deg) translateZ(100px);
}
</style>
</head>
<body>
<div class=”square”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>