CSS3 3D轉動是一種炫酷的效果，可以用來增強網頁上元素的視覺效果。在CSS中使用3D轉動效果，需要使用CSS3的transform屬性和perspective屬性。

.box{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: center center;
transition: all .5s ease;
}
.front{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;  /* 隱藏背面，避免翻轉時出現重影 */
transform: translateZ(100px);  /* 前面拉近 */
background-color: #fc7d7b;
}
.back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg) translateZ(100px);  /* 翻轉180度，然后拉近 */
background-color: #1abc9c;
}
.box:hover{
transform: rotateY(-180deg);  /* 鼠標懸浮時，翻轉180度 */
}

在上述代碼中，我們首先創建了一個容器.box，使用preserve-3d屬性啟用3D變換，設置容器中心為變換原點。然后創建了兩個面.front和.back，分別代表正面和反面。使用translateZ函數可以將正面往前拉近，使用rotateY函數可以讓反面翻轉180度，然后再拉近，讓它們在同一平面上。

最后，我們使用:hover偽類控制容器.box的翻轉效果，當鼠標懸浮在元素上時，就會觸發樣式改變，從而使.box產生一個平滑的翻轉效果。通過這種方式，我們就可以輕松實現一個炫酷的3D轉動效果了。