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);
}
