html本身不直接實現變形，但通過css的transform屬性，可以對html元素進行旋轉、縮放、傾斜和平移等視覺效果。1. transform可在二維或三維空間改變元素形狀和位置，包括rotate（旋轉）、scale（縮放）、skew（傾斜）和translate（平移），這些變換不影響文檔流。2. 使用時需在html中定義結構，在css中為對應元素添加transform屬性，多個變換函數可用空格分隔組合使用。3. 常見場景有按鈕懸停效果、輪播圖動畫、圖標動畫以及響應式設計中的適配調整，但應避免過度使用以減少性能問題。4. 配合transition屬性可實現平滑動畫效果，使變換過程更自然流暢。
HTML本身不直接實現變形，但通過CSS的transform屬性，可以對html元素進行旋轉、縮放、傾斜和平移等視覺效果。也就是說，HTML提供結構，CSS負責樣式和變形操作。
1. transform能做什么？
transform可以在二維或三維空間中改變元素的形狀和位置，主要功能包括：
- rotate：旋轉，比如讓一個按鈕轉一圈。
- scale：縮放，可以讓圖片放大縮小。
- skew：傾斜，像是把矩形拉成平行四邊形。
- translate：平移，相當于移動位置但不影響布局。
這些變換不會影響頁面的文檔流，也就是說，即使元素被移動了，原來的位置也不會被其他元素占據。
立即學習“前端免費學習筆記（深入）”；
2. 怎么在HTML里使用transform？
其實很簡單，只要寫好HTML結構，然后在CSS中給對應的元素加上transform屬性就行。
舉個例子：
<div class="box"></div>
.box { width: 100px; height: 100px; background-color: red; transform: rotate(45deg) scale(1.5); }
上面這段代碼會讓紅色方塊旋轉45度，并放大到原來的1.5倍。你可以根據需要組合多個變換函數，用空格分隔即可。
3. transform常用場景有哪些？
- 按鈕懸停效果：鼠標移上去時放大一點或輕微旋轉，提升交互感。
- 輪播圖動畫：配合translateX來實現左右滑動。
- 圖標動畫：比如加載圖標用無限旋轉實現。
- 響應式設計中的適配調整：在不同屏幕尺寸下微調元素角度或大小。
需要注意的是，過度使用transform可能會導致性能問題，尤其是在移動端，所以建議合理控制動畫復雜度。
4. transform與過渡效果搭配更佳
單獨使用transform雖然有效果，但如果加上transition就能做出平滑的動畫效果。
例如：
.box { transition: transform 0.3s ease; } .box:hover { transform: scale(1.2) rotate(10deg); }
這樣在鼠標懸停的時候，元素會以動畫形式完成縮放和旋轉，而不是瞬間變化。
基本上就這些。掌握幾個基本函數，再結合實際項目去嘗試，你會發現transform是一個非常實用又靈活的工具。
