CSS 的 mask-image 属性本身并不支持直接旋转，但通过将遮罩层与背景层分离为两个嵌套元素，并对遮罩容器应用 transform: rotate()，即可实现精准控制。
结论先行：CSS 的 mask-image 属性原生不支持旋转，但借助结构分离技巧，能够绕过这一限制，实现遮罩图案的独立旋转，同时不影响背景或元素本身。
解决此问题的核心思路非常直观：将遮罩与内容分布在不同层级。具体做法是把背景（例如渐变）和遮罩图像分别放置于独立的 DOM 元素中，让遮罩层成为一个纯色覆盖层，然后单独对其应用 transform 变换。
具体操作步骤如下：
- 外层容器负责承载背景样式（如线性渐变），不设置任何 mask 相关属性。
- 内层遮罩元素仅负责呈现 mask 图像。使用纯白色（
background: white或#fff）作为遮罩的“画布”，并应用mask-image、mask-position和mask-composite: exclude。 - 直接对这个内层元素使用
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 解决方案。
