CSS3的3D特效給網頁設計帶來了全新的可能性。其中，左右3D旋轉特效是一種獨特的展示方式，下面我們將介紹如何實現這一效果。

.container {
perspective: 1000px; /* 設置透視視角 */
position: relative;
}
.box {
position: absolute;
width: 200px;
height: 200px;
transform-style: preserve-3d; /* 保留3D屬性 */
transition: all 1s ease-in-out; /* 設置過渡效果 */
}
.box:hover {
transform: rotateY(180deg); /* 鼠標懸停時觸發旋轉效果 */
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隱藏背面 */
}
.front {
background-color: #fff;
z-index: 2; /* 設置前面的元素層級為2 */
}
.back {
background-color: #000;
transform: rotateY(180deg); /* 翻轉元素180度 */
}

通過設置元素的透視視角和3D屬性，我們可以實現左右旋轉的效果。代碼中，我們先在容器元素上設置了透視視角，然后將旋轉元素的transform-style屬性設為preserve-3d，這樣使得它們在父級元素的3D透視下進行旋轉。

另外，我們設置了過渡效果，使得旋轉有了從緩慢到迅速的動畫效果。而.front和.back分別代表元素的正面和反面，并通過backface-visibility屬性將背面元素隱藏。最后，在旋轉的過程中，可以看到前面的元素會翻轉成后面的元素，實現了左右3D旋轉的特效。