要實現 CSS 圖片 3D 轉圈,需要使用 3D 轉換屬性 transform 和動畫屬性 animation。首先,將需要旋轉的圖片放在一個容器元素中,并將容器元素樣式設置為 perspective:
.container { perspective: 1000px; }
然后,將容器元素中的圖片元素樣式設置為 transform-style:preserve-3d,以便在轉換時保持 3D 效果:
img { transform-style: preserve-3d; }
接著,定義動畫屬性,設置旋轉的時間、旋轉方式和動畫循環次數:
@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } .container:hover img { animation: spin 2s ease-in-out infinite; }
最后,當鼠標懸停在容器元素上時,圖片將開始旋轉,并且可以無限循環,直到鼠標移開為止。