加入正方形宽高为100px，
ul li:nth-child(1){background-color: red
transform: translate(-100px) rotateY(90deg)
}
ul li:nth-child(2){
background-color: blue
transform: translate(100px) rotateY(90deg)
}
ul li:nth-child(3){
background-color: orange
transform: translateZ(100px)
}
ul li:nth-child(4){
background-color: green
transform: translateZ(-100px)
}
ul li:nth-child(5){
background-color: black
transform: translateY(100px) rotateX(90deg)
}
ul li:nth-child(6){
background-color: chocolate
transform: translateY(-100px) rotateX(90deg)
}
空间想象力要好，最开始所有面都重合在一起，要一个个移到指定位置形成个立方体
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>_</title>
</head>
<body>
<div class="contain">
<div class="box">
<div class="face one"> </div>
<div class="face two"> </div>
<div class="face three"> </div>
<div class="face four"> </div>
<div class="face five"> </div>
<div class="face six"> </div>
</div>
</div>
<style>
.contain {
height: 550px
margin: 100px auto
position: relative
width: 250px
}
.box {
animation: 4s ease 0s normal none infinite running rotate
height: 240px
margin: 0 auto
position: relative
transform-style: preserve-3d
width: 240px
}
.face {
backface-visibility: hidden
background-color: #fae48c
height: 240px
opacity: 0.6
position: absolute
width: 240px
}
.box .one {
background-color: #fae48c
transform: rotateX(90deg) translateZ(120px)
}
.box .two {
background-color:#9900CC
transform: translateZ(120px)
}
.box .three {
background-color:#009900
transform: rotateY(90deg) translateZ(120px)
}
.box .four {
background-color:#66CCFF
transform: rotateY(180deg) translateZ(120px)
}
.box .five {
background-color:#CC0000
transform: rotateY(-90deg) translateZ(120px)
}
.box .six {
background: none repeat scroll 0 0 #fae48c
transform: rotateX(-90deg) translateZ(120px) rotate(180deg)
}
@keyframes rotate {
100% {
transform: rotateY(360deg) rotateX(360deg)
}
}
</style>
</body>
</html>
有chrome和firefox下测试可以看到
