<style>
.fa{
perspective: 10000px;
transform-style: preserve-3d;
/* rotateZ(10deg) */
transition:all 6s;
}
.fa:hover {
transform: rotateX(-52deg) rotateY(42deg) ;
}
.fa:hover .top{
transform: translateY(-150PX) rotateX(90deg) ;
}
.fa:hover .bottom{
transform:translateY(150PX) rotateX(90deg) ;
}
.fa:hover .right{transform: translateX(-150PX) rotateY(-90deg);}
.fa:hover .left{transform: translateX(150PX) rotateY(90deg);}
.fa:hover .font{transform: translateZ(150px);}
.fa:hover .back{transform: translateZ(-150px);}
.side{
top: 100px;
left: 100px;
position: absolute;
border: 1px solid;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
opacity: .5;
transition: all 3s;
}
.top{
background-color: aquamarine;
transform: translateY(-50PX) rotateX(90deg) ;
}
.bottom{
transform:translateY(50PX) rotateX(90deg);
background: yellow;
}
.right{
transform: translateX(-50PX) rotateY(-90deg);
}
.left{
transform: translateX(50PX) rotateY(90deg);
}
.font{
transform: translateZ(50px);
}
.back{
transform: translateZ(-50px);
}
.mid{
background-color: red;
}
</style>
<div class="fa">
<div class="side mid">中</div>
<div class="side top">上</div>
<div class="side bottom">底</div>
<div class="side font">前</div>
<div class="side back">后</div>
<div class="side right">右</div>
<div class="side left">左</div>
</div>
为什么要贴上一个代码?
因为我不想解释啦!哈哈哈哈
以下效果图
:hover可以应用给多个子元素,例如上述代码中的第一个hover以后的所有hover都是应用在fa选择器下的六个子元素,也就是控制四方体在鼠标移上时散开效果的六个hover;