CSS制作字体旋转

使用CSS的transform属性旋转字体

通过CSS的transform属性配合rotate()函数可以实现字体旋转效果。rotate()接受角度值（如deg、rad、grad或turn），正值顺时针旋转，负值逆时针旋转。

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

调整旋转中心点

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

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

平滑过渡动画

结合transition或@keyframes实现动态旋转效果：

过渡效果：

.rotated-text {
  transition: transform 0.5s ease;
}
.rotated-text:hover {
  transform: rotate(180deg);
}

关键帧动画：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinning-text {
  animation: spin 2s linear infinite;
}

解决布局偏移问题

旋转可能导致元素占用空间计算错误，可通过调整父容器尺寸或使用margin/padding补偿：

.container {
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

垂直或倾斜文本

使用rotate结合writing-mode实现特殊排版：

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

浏览器兼容性

为兼容旧版浏览器，添加前缀：

.rotated-text {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}