CSS制作字体旋转

使用 transform 属性旋转字体

通过 CSS 的 transform 属性配合 rotate() 函数实现字体旋转。rotate() 接受角度值（如 45deg），正值表示顺时针旋转，负值表示逆时针旋转。

.rotated-text {
  transform: rotate(30deg);
  display: inline-block; /* 确保旋转不影响布局 */
}

控制旋转原点

默认旋转原点为元素中心，可通过 transform-origin 调整。例如以左下角为原点旋转：

.rotated-text {
  transform: rotate(15deg);
  transform-origin: left bottom;
}

悬停交互旋转

结合 :hover 伪类实现鼠标悬停时旋转：

.rotated-text:hover {
  transform: rotate(90deg);
  transition: transform 0.3s ease; /* 添加平滑过渡 */
}

多方向旋转动画

使用 @keyframes 创建连续旋转动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotated-text {
  animation: spin 4s linear infinite;
}

文字与容器同步旋转

若需保持文字与容器对齐，将旋转应用于父容器：

<div class="rotated-box">
  <p>旋转的文字</p>
</div>

.rotated-box {
  transform: rotate(-10deg);
  width: fit-content;
}