版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width:500px;
height: 400px;
border: 1px solid red;
margin:50px auto;
position: relative;
transform-style: preserve-3d;
/*transform: rotateX(45deg) rotateY(45deg);*/
animation: move 5s linear infinite;
}
#box .aa{
width:200px;
height:200px;
text-align: center;
line-height: 200px;
font-size: 50px;
position: absolute;
left:150px;
top:100px;
transition: all 2s;
/*border: 4px solid #FF0000;*/
}
#box1{
width:100px;
height: 100px;
/*margin:-250px -200px;*/
position: relative;
/*transform-style: preserve-3d;*/
/*transform: rotateX(45deg) rotateY(45deg);*/
/* animation: move 5s linear infinite;*/
}
#box1 .bb{
width:100px;
height:100px;
text-align: center;
line-height: 100px;
font-size: 25px;
position: absolute;
left:50px;
top:50px;
transition: all 2s;
/*border: 4px solid #FF0000;*/
}
@keyframes move{
0%{
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
100%{
transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}
}
#box .aa:nth-child(1){
transform: rotateY(90deg) translateZ(100px);
}
#box .aa:nth-child(2){
transform: rotateY(180deg) translateZ(100px);
}
#box .aa:nth-child(3){
transform: rotateY(270deg) translateZ(100px);
}
#box .aa:nth-child(4){
transform: rotateY(360deg) translateZ(100px);
}
#box .aa:nth-child(5){
transform: rotateX(90deg) translateZ(100px);
}
#box .aa:nth-child(6){
transform: rotateX(-90deg) translateZ(100px);
}
#box .aa:nth-child(7){
background: none;
}
#box:hover .aa:nth-child(1){
transform: rotateY(90deg) translateZ(150px);
}
#box:hover .aa:nth-child(2){
transform: rotateY(180deg) translateZ(150px);
}
#box:hover .aa:nth-child(3){
transform: rotateY(270deg) translateZ(150px);
}
#box:hover .aa:nth-child(4){
transform: rotateY(360deg) translateZ(150px);
}
#box:hover .aa:nth-child(5){
transform: rotateX(90deg) translateZ(150px);
}
#box:hover .aa:nth-child(6){
transform: rotateX(-90deg) translateZ(150px);
}
#box1 .bb:nth-child(1){
transform: rotateY(90deg) translateZ(50px);
}
#box1 .bb:nth-child(2){
transform: rotateY(180deg) translateZ(50px);
}
#box1 .bb:nth-child(3){
transform: rotateY(270deg) translateZ(50px);
}
#box1 .bb:nth-child(4){
transform: rotateY(360deg) translateZ(50px);
}
#box1 .bb:nth-child(5){
transform: rotateX(90deg) translateZ(50px);
}
#box1 .bb:nth-child(6){
transform: rotateX(-90deg) translateZ(50px);
}
</style>
<body>
<div id="box">
<div class="aa a1"><img src="mn1.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a2"><img src="mn2.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a3"><img src="mn3.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a4"><img src="mn4.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a5"><img src="mn5.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a6"><img src="mn6.jpg" style="width: 200px;height: 200px;"/></div>
<div class="aa a7" id="box1">
<div class="bb b1">1</div>
<div class="bb b2">2</div>
<div class="bb b3">3</div>
<div class="bb b4">4</div>
<div class="bb b5">5</div>
<div class="bb b6">6</div>
</div>
</div>
</body>
<script type="text/javascript">
var oDiv=box.getElementsByTagName("div");
setInterval(function(){
for(var i=7;i<oDiv.length;i++){
var R=Math.round(Math.random()*255),
G=Math.round(Math.random()*255),
B=Math.round(Math.random()*255);
oDiv[i].style.cssText="background: rgba("+R+","+G+","+B+",1);"
// if(i<4){
// oDiv[i].style.cssText+="transform:rotateY("+i*90+"deg) translateZ(100px);"
// }else if(i==4){
// oDiv[i].style.cssText+="transform:rotateX(90deg) translateZ(100px);"
// }else{
// oDiv[i].style.cssText+="transform:rotateY(-90deg) translateZ(100px);"
// }
}
},1000)
</script>
</html>
