CSS mask-image独立旋转而不影响元素的方法

CSS 的 mask-image 本身不支持直接旋转，但可通过将遮罩层与背景层分离为两个嵌套元素，并对遮罩容器应用 transform: rotate() 实现精准控制。

核心结论

先说结论：CSS 的 mask-image 本身不支持直接旋转，但通过结构分离，我们可以绕开这个限制，实现对遮罩图案的独立旋转，而不影响背景或元素本身。

核心思路：结构分离

要解决这个问题，核心思路其实很简单：把遮罩和内容分到不同的层级里。具体来说，就是将背景（比如渐变）和遮罩图像分别放在不同的 DOM 元素中，让遮罩层变成一个纯色覆盖层，然后单独对它施加 transform。

操作步骤

具体怎么操作呢？其实很简单：

1. 外层容器负责承载背景样式（比如线性渐变），不设置任何 mask 相关属性。
2. 内层遮罩元素只负责呈现 mask 图像。它使用纯白色（background: white 或 #fff）作为 mask 的“画布”，并应用 mask-image、mask-position 和 mask-composite: exclude。
3. 直接对这个内层元素使用 transform: rotate(Xdeg)——由于它本身没有视觉内容（仅作为遮罩载体），旋转不会影响背景观感，却能精确控制 mask 图像的方向。

示例代码

来看一个优化的示例代码（兼顾了兼容性与可维护性）：

.water {
  position: absolute;
  width: 100%;
  height: 100rem;
  margin-top: -2.55rem;
  background: linear-gradient(
    180deg,
    rgba(53, 99, 233, 0.98) 1.17%,
    rgba(25, 53, 136, 0.99) 36.14%,
    #000D34 96.66%
  );
}

.light-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* 铺满父容器 */
  background: white; /* 必须为不透明白色，确保 mask 生效 */
  mask-image: url("https://i.ibb.co/FzmCjLL/Jqtz.png");
  mask-repeat: no-repeat;
  mask-composite: exclude;
  mask-position: 50% 20%;
  mask-size: contain; /* 推荐添加，避免图像拉伸失真 */
  transform: rotate(30deg); /*  此处旋转仅作用于遮罩图像 */
  /* 可选：提升渲染性能 */
  will-change: transform;
}

注意事项

使用时有几个细节需要注意：

• mask-composite: exclude 要求遮罩层背景必须为完全不透明的白色（#fff 或 white），否则排除效果可能异常。
• mask-size 建议显式设置（如 contain、cover 或具体尺寸），避免因默认缩放导致旋转后遮罩错位。
• 若需要响应式旋转角度，推荐使用 CSS 自定义属性 + calc() 或 JavaScript 动态更新 --rotate-angle 变量。
• 当前方案在 Chrome、Edge、Safari（v15.4+）及 Firefox（v110+，需启用 layout.css.masking.enabled）中稳定支持；旧版 Firefox 不支持 mask-composite，需提供降级方案（如 SVG mask 或伪元素模拟）。

通过这种结构分离 + 变换委托的设计，你可以保持背景布局稳定，同时自由操控遮罩方向——这是目前兼容性最好、语义最清晰的纯 CSS 解决方案。