效果图:
HTML代码:
<div class="wrap">
<div class="cube">
<div class="outer-front">前面</div>
<div class="outer-back">后面</div>
<div class="outer-left">左面</div>
<div class="outer-right">右面</div>
<div class="outer-top">上面</div>
<div class="outer-bottom">底面</div>
<span class="inner-front"></span>
<span class="inner-back"></span>
<span class="inner-left"></span>
<span class="inner-right"></span>
<span class="inner-top"></span>
<span class="inner-bottom"></span>
</div>
</div>
CSS代码:
html{
background: linear-gradient(#f00, #000); height: 100%;
}
.wrap{
margin: 200px; perspective: 1000px;
}
.cube{
margin: 0 auto; width: 200px; height: 200px; position: relative; color: #fff; font-size: 18px; text-align: center; line-height: 200px;
transform-style: preserve-3d; animation: rotate 6s infinite linear;
}
/*定义动画*/
@keyframes rotate{
0%{ transform: rotateX(0deg) rotateY(0deg); }
100%{ transform: rotateX(360deg) rotateY(360deg); }
}
/*大立方体样式*/
.cube div{
border: 1px solid #666; width: 100%; height: 100%; background: rgba(20,50,50,0.8); position: absolute; transition: all 1s;
}
.cube .outer-front{
transform: translateZ(100px);
}
.cube .outer-back{
transform: translateZ(-100px) rotateY(-180deg);
}
.cube .outer-left{
transform: translateX(100px) rotateY(90deg);
}
.cube .outer-right{
transform: translateX(-100px) rotateY(-90deg);
}
.cube .outer-top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .outer-bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*大立方体鼠标滑过*/
.cube:hover .outer-front{
transform: translateZ(200px);
}
.cube:hover .outer-back{
transform: translateZ(-200px) rotateY(-180deg);
}
.cube:hover .outer-left{
transform: translateX(200px) rotateY(90deg);
}
.cube:hover .outer-right{
transform: translateX(-200px) rotateY(-90deg);
}
.cube:hover .outer-top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .outer-bottom{
transform: rotateX(-90deg) translateZ(200px);
}
/*小立方体*/
.cube span{
display: block; width: 100px; height: 100px; background: rgba(70,190,170,0.8); position: absolute;
}
.cube span:nth-child(even){
background: url('2.jpg') no-repeat; background-size: contain;
}
.cube span:nth-child(odd){
background: url('3.jpg') no-repeat; background-size: contain;
}
.cube .inner-front{
transform: translateZ(50px) translateY(50px) translateX(50px);
}
.cube .inner-back{
transform: translateZ(-50px) translateY(50px) rotateY(-180deg) translateX(-50px);
}
.cube .inner-left{
transform: translateX(-50px) translateY(50px) rotateY(-90deg) translateZ(-50px);
}
.cube .inner-right{
transform: translateX(49px) translateY(50px) rotateY(90deg) translateZ(50px);
}
.cube .inner-top{
transform: rotateX(90deg) translateZ(0px) translateX(50px);
}
.cube .inner-bottom{
transform: rotateX(-90deg) translateZ(100px) translateX(50px);
}
参考:http://www.jikexueyuan.com/course/2433.html