CSS3中引入了3D變換的新特性，在實現(xiàn)3D旋轉(zhuǎn)圖片時非常方便。下面我們來了解如何利用CSS3的3D旋轉(zhuǎn)功能，制作出炫酷的3D旋轉(zhuǎn)照片。

.photo-container {
perspective: 1000px; /* 透視效果，實現(xiàn)3D視覺效果 */
transform-style: preserve-3d; /* 變換樣式，保留3D */
}
.photo {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform-origin: center; /* 旋轉(zhuǎn)中心點為正中央 */
transition: transform 2s ease-in-out; /* 過渡效果，使旋轉(zhuǎn)更加平滑 */
}
.photo:hover {
transform: rotateY(180deg); /* 鼠標移上去時進行翻轉(zhuǎn) */
}

首先，我們給照片容器添加透視效果和3D變換樣式。然后，對照片本身進行變換樣式和設(shè)置中心點為正中央。最后，給照片添加過渡效果和鼠標懸浮時進行的旋轉(zhuǎn)。這樣就可以實現(xiàn)3D旋轉(zhuǎn)照片了。