要實現css旋轉效果，核心是使用transform: rotate()屬性，并可通過transition或animation實現動畫。1. 基礎旋轉使用transform: rotate(角度)，支持deg、rad、turn等單位；2. 靜態旋轉直接設置rotate值；3. 動態旋轉可使用transition實現懸停過渡，或animation實現持續動畫；4. 通過transform-origin可更改旋轉中心點；5. 性能優化包括使用硬件加速、簡化結構、合理使用will-change；6. 圖片模糊問題可通過backface-visibility: hidden、高分辨率圖或svg解決；7. 3d旋轉使用rotatex、rotatey、rotatez，并配合transform-style: preserve-3d和perspective實現立體效果。
css設置旋轉效果，核心在于transform: rotate()屬性，配合transition或animation來實現平滑的旋轉動畫。
解決方案
要實現旋轉效果，最基本的就是使用transform: rotate(角度)。角度單位可以是deg（度）、rad（弧度）、turn（圈數）等。例如，transform: rotate(90deg)會讓元素順時針旋轉90度。
立即學習“前端免費學習筆記（深入）”；
靜態旋轉：
.rotate { transform: rotate(45deg); /* 順時針旋轉45度 */ }
動態旋轉（使用transition）：
.rotate { transition: transform 0.5s ease-in-out; /* 0.5秒完成，緩入緩出效果 */ } .rotate:hover { transform: rotate(180deg); /* 鼠標懸停時旋轉180度 */ }
動態旋轉（使用animation）：
.rotate { animation: spin 2s linear infinite; /* 持續旋轉，每次2秒，線性速度 */ } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
需要注意的是，transform-origin屬性可以改變旋轉的中心點，默認是元素的中心。例如，transform-origin: top left會讓元素從左上角旋轉。
CSS 旋轉性能優化有哪些技巧？
避免頻繁觸發重繪：盡量使用硬件加速，例如transform: translateZ(0)或backface-visibility: hidden可以嘗試開啟硬件加速，但并非總是有效，需要具體情況具體分析。有時反而會降低性能，特別是在移動端。
簡化元素結構：復雜的元素旋轉會增加渲染負擔，盡量減少不必要的嵌套。
使用will-change屬性：提前告知瀏覽器元素即將發生改變，例如will-change: transform，但這需要謹慎使用，過度使用反而可能導致性能問題。
圖片旋轉模糊怎么辦？
旋轉導致的圖片模糊通常是由于瀏覽器渲染優化不足或者圖片本身質量不高。
嘗試使用backface-visibility: hidden：這可以強制瀏覽器渲染元素的背面，有時可以改善模糊問題。
提高圖片分辨率：使用更高分辨率的圖片，犧牲一部分加載速度來換取更好的顯示效果。
使用矢量圖（SVG）：SVG是矢量圖形，旋轉不會失真，清晰度更高。
CSS 3D 旋轉如何實現？
除了2D旋轉rotate()，CSS還提供了3D旋轉rotateX()、rotateY()和rotateZ()。
.cube { transform-style: preserve-3d; /* 關鍵屬性，保持3D效果 */ transition: transform 1s; } .cube:hover { transform: rotateX(45deg) rotateY(45deg); /* 同時沿X軸和Y軸旋轉 */ }
要實現真正的3D效果，需要transform-style: preserve-3d屬性，它告訴瀏覽器保持元素的3D結構。否則，所有子元素都會被扁平化到2D平面上。
另一個需要注意的是，perspective屬性可以設置觀察者的視角距離，影響3D效果的強烈程度。例如，perspective: 800px表示觀察者距離屏幕800像素。這個值越小，3D效果越明顯，但也可能導致變形。
