當(dāng)我們需要展示一個物體或場景的全景圖時，3D旋轉(zhuǎn)360度效果可以為我們提供非常好的展示效果，這種效果可以通過CSS3動畫輕松實現(xiàn)。下面來看看如何實現(xiàn)。

/* 容器樣式 */
.container {
width: 400px;
height: 400px;
perspective: 1000px; /* 透視值，越大看起來越近 */
perspective-origin: center; /* 透視點位置 */
}
/* 轉(zhuǎn)動的元素 */
.box {
width: 100%;
height: 100%;
transform-style: preserve-3d; /* 保持3D轉(zhuǎn)換效果 */
animation: rotate 10s linear infinite; /* 動畫效果，每10秒完整旋轉(zhuǎn)一次 */
}
/* 定義轉(zhuǎn)動動畫 */
@keyframes rotate {
from {
transform: rotateY(0deg); /* Y軸從0度開始旋轉(zhuǎn) */
}
to {
transform: rotateY(360deg); /* Y軸旋轉(zhuǎn)360度 */
}
}

在這段代碼中，我們首先定義了一個容器元素，它有一個寬度和高度，還有一個透視值和透視點位置。透視值越大，近處與遠(yuǎn)處之間的差距就越大，看起來就更真實。

容器中包含一個轉(zhuǎn)動的元素，在這個元素中，我們啟用了3D效果的保持并定義了一個旋轉(zhuǎn)的動畫，從0度開始到360度，每10秒完整旋轉(zhuǎn)一次。

這樣，我們就得到了一個非常簡單的3D旋轉(zhuǎn)360度效果，可以應(yīng)用于展示產(chǎn)品或者虛擬旅游等場景。