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