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字）