CSS 的 mask-image 本身不支持直接旋转，需通过将遮罩层与背景层分离为两个嵌套元素，并对遮罩容器应用 transform: rotate() 实现独立旋转。
css 的 `mask-image` 本身不支持直接旋转，需通过将遮罩层与背景层分离为两个嵌套元素，并对遮罩容器应用 `transform: rotate()` 实现独立旋转。
在标准 CSS 中，mask-image 是一个静态图像资源，其渲染行为受 mask-position、mask-size 和 mask-repeat 控制，但没有原生的 mask-rotate 属性。若直接对应用了 mask-image 的元素使用 rotate()，会导致整个元素（包括背景、子内容和边框）一同旋转，违背“仅旋转遮罩图案”的需求。
✅ 正确解法是采用分层隔离策略：
- 将渐变背景移至外层容器（.water），仅负责视觉渲染；
- 将 mask-image 单独应用于内层覆盖元素（.light-layer），该元素自身无内容、仅作为遮罩载体；
- 对 .light-layer 应用 transform: rotate(30deg) —— 此时仅遮罩图像随容器旋转，背景不受影响。
以下是优化后的完整实现：
<body>
<div class="water">
<div class="light-layer"></div>
</div>
</body>.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 {
height: 100%;
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); // ✅ 仅旋转遮罩层
// 可选：添加 transform-origin 控制旋转中心点
transform-origin: center;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- .light-layer 必须有非透明背景色（如 white 或 rgba(255,255,255,1)），因为 mask-composite: exclude 依赖于遮罩层与底层内容的 Alpha 差异；纯透明背景将导致遮罩失效。
- mask-size 建议显式设置（如 contain、cover 或具体尺寸），避免旋转后图像比例失真。
- 若需动态旋转，可结合 CSS 自定义属性（--rotate-angle）与 calc() 实现响应式控制：
--rotate-angle: 30deg; transform: rotate(var(--rotate-angle));
该方案兼容现代浏览器（Chrome 112+、Firefox 110+、Safari 16.4+），且语义清晰、维护性强，是目前最可靠、标准化的 mask 图像旋转实践。
