css中如何設置文字旋轉角度

# CSS中如何設置文字旋轉角度

在網頁設計中，文字旋轉是一種常見的視覺效果，能夠增強頁面的動態感和設計感。CSS提供了多種方式實現文字旋轉，本文將詳細介紹這些方法及其應用場景。

---

## 1. 使用`transform: rotate()`屬性

**最常用的文字旋轉方法**是通過CSS的`transform`屬性配合`rotate()`函數實現。該屬性支持**二維和三維旋轉**，單位為`deg`（度數）、`rad`（弧度）或`turn`（圈數）。

### 基本語法
```css
.rotated-text {
  transform: rotate(45deg); /* 順時針旋轉45度 */
}

示例效果

• rotate(90deg)：文字垂直向上
• rotate(-30deg)：逆時針旋轉30度
• rotate(1turn)：完整旋轉360度

注意事項

• 旋轉后可能影響元素布局，需配合transform-origin調整旋轉原點
• 默認以元素中心為旋轉點，可通過transform-origin: left top改為左上角旋轉

2. 結合writing-mode實現垂直排版

當需要文字垂直排列而非簡單旋轉時，writing-mode屬性更語義化：

.vertical-text {
  writing-mode: vertical-rl; /* 從右到左垂直排列 */
}

可選值

• vertical-rl：垂直，從右向左（中文傳統排版）
• vertical-lr：垂直，從左向右
• horizontal-tb：默認水平排列

3. 使用text-orientation控制方向

配合writing-mode使用時，text-orientation可定義字符方向：

.mixed-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 保持字母直立 */
}

4. SVG文本旋轉

對于復雜旋轉效果（如路徑文字），SVG方案更靈活：

<svg>
  <text x="50" y="50" transform="rotate(30 50,50)">旋轉文字</text>
</svg>

實際應用場景

案例1：傾斜標題設計

.title {
  transform: rotate(-5deg);
  display: inline-block;
  background: #f0f;
  padding: 0 10px;
}

案例2：表格垂直表頭

th.vertical {
  writing-mode: vertical-rl;
  height: 150px;
}

案例3：環形文字效果

需配合transform-origin和逐字符旋轉實現。

瀏覽器兼容性提示

• transform: rotate()支持所有現代瀏覽器（包括IE9+）
• writing-mode在IE中的行為與其他瀏覽器略有差異
• 舊版Android需加-webkit-前綴

總結

選擇合適的方法需根據具體需求，通常優先考慮transform實現簡單旋轉，特殊排版場景使用writing-mode。通過組合這些屬性，可以創造出豐富的文字視覺效果。 “`

（全文約650字）