既然自己对css3有过深入了解，那还是意思意思一下吧！！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3d旋转正方体</title>
</head>
<style>
.box1{
width: 750px;
height: 450px;
margin: 100px auto;
transform: scale(0.8) translateY(-20px); /*scale:缩放*/
}
.box2{
position: relative;
perspective: 1000px;
animation: show1 10s linear infinite;
}
@keyframes show1{
0%{
transform: translate(0,0);}
20%{
transform: translate(300px,0);}
40%{
transform: translate(0,-200px);}
60%{
transform: translate(-300px,0);}
80%{
transform: translate(0,300px);}
100%{
transform: translate(0px,0);}
}
.box3{
width: 600px;
height: 600px;
transform-style: preserve-3d;
transform-origin: 50% 50% 150px;
animation: rotate-frame 30s linear infinite;
}
.list{
width: 300px;
height: 300px;
position: absolute;
}
.top{
left: 150px;
top: -150px;
transform-origin: bottom;
transform: rotateX(-90deg);
background-image: url(img/icon-1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bottom{
left: 150px;
bottom: -150px;
transform-origin: top;
transform: rotateX(90deg);
background-image: url(img/icon-2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left{
left: -150px;
top: 150px;
transform-origin: right;
transform: rotateY(90deg);
background-image: url(img/icon-3.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right{
left: 450px;
top: 150px;
transform-origin: left;
transform: rotateY(-90deg);
background-image: url(img/icon-4.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.front{
left: 150px;
top: 150px;
transform: translateZ(300px);
background-image: url(img/icon-5.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.back{
left: 150px;
top: 150px;
transform: translateZ(0);
background-image: url(img/icon-6.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@keyframes rotate-frame {
0% { transform: rotateX(0deg) rotateY(0deg); }
10% { transform: rotateX(0deg) rotateY(180deg); }
20% { transform: rotateX(-180deg) rotateY(180deg); }
30% { transform: rotateX(-360deg) rotateY(180deg); }
40% { transform: rotateX(-360deg) rotateY(360deg); }
50% { transform: rotateX(-180deg) rotateY(360deg); }
60% { transform: rotateX(90deg) rotateY(180deg); }
70% { transform: rotateX(0) rotateY(180deg); }
80% { transform: rotateX(90deg) rotateY(90deg); }
90% { transform: rotateX(90deg) rotateY(0); }
100% { transform: rotateX(0) rotateY(0); } }
</style>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<div class="top list">1</div>
<div class="bottom list">2</div>
<div class="left list">3</div>
<div class="right list">4</div>
<div class="front list">5</div>
<div class="back list">6</div>
</div>
</div>
</div>
</body>
</html>