如何只旋转text-shadow生成的文字阴影，而不带动文字本身旋转？

原生text-shadow属性不支持独立设置变换规则，直接给元素加transform会同时作用于文字和阴影，你可以通过伪元素拆分文字、阴影两层的方式实现需求，具体实现如下：

代码示例 #

HTML 结构 #

<!-- 把文字内容同步写到data-text属性里，方便伪元素调用 -->
<div class="text-box" data-text="示例文字">示例文字</div>

CSS 样式 #

.text-box {
  position: relative;
  /* 保持和伪元素一致的文字样式即可，可按需修改 */
  font-size: 50px;
  font-weight: bold;
}

/* 用伪元素单独做阴影层 */
.text-box::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  /* 隐藏伪元素本身的文字，只保留阴影 */
  color: transparent;
  /* 你的阴影设置 */
  text-shadow: 20px 20px 1px red;
  /* 仅给阴影层加旋转，不会影响原文字 */
  transform: rotate(180deg);
}

注意事项 #

• 伪元素的字体、字号、行高需要和原文字完全一致，避免阴影和文字错位
• 如果需要调整阴影位置，可以修改text-shadow的偏移参数，或者直接调整伪元素的top/left值
• 不要给.text-box加会创建层叠上下文的属性（比如transform、小于1的opacity），如果需要给整个文字加变换，可在外层再套一层容器实现

内容的提问来源于stack exchange，提问作者FrEZy