纯CSS 做旋转立方体

<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；