CSS3是當前前端開發必備技能之一，除了可以實現頁面的動態效果也可以使用它來設置3D效果。

要實現CSS3的3D效果首先需要了解以下屬性：

transform: rotateX(30deg);
transform: rotateY(30deg);
transform: rotateZ(30deg);

以上三個屬性來實現分別實現3D效果的x軸旋轉、y軸旋轉以及z軸旋轉。

接下來我們可以使用以下的樣式代碼來實現一個簡單的3D展示效果：

.box{
position: relative;
display: inline-block;
perspective: 500px; 
/*設置透視距離用來更好地實現3D效果*/
}
.box div{
position: absolute;
width: 200px;
height: 200px;
background: #7d7d7d;
border: 1px solid #000;
box-shadow: 0 0 40px rgba(0,0,0,.5);
transform-style: preserve-3d; 
transition: transform .5s linear; 
/*
transition: 過渡屬性
.5s: 過渡時間
linear: 過渡速度
*/
 }
.box div:last-child{
transform: translateZ(-100px); 
/*以下為沿x,y,z軸旋轉的效果*/
/*transform: rotateX(-180deg); 
transform: rotateY(-180deg); 
transform: rotateZ(-180deg);*/ 
}
.box:hover div:last-child{
//transform: rotateX(-180deg); 
transform: rotateY(-180deg); 
//transform: rotateZ(-180deg);
}

以上代碼實現了一個簡單的3D展示效果，當鼠標懸浮在盒子區域時底部的方塊會向前180度進行翻轉。