我在CSS中有一个遮罩图像，我可以使用遮罩位置属性轻松定位它，但我不知道如何旋转它。如何在不旋转整个元素的情况下旋转蒙版图像？
这是我的代码：
<body>
<div class="water light-layer"></div>
</body>
<style lang="scss">
.light-layer {
position: absolute;
z-index: 4;
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%);
mask-image: url("https://i.ibb.co/FzmCjLL/Jqtz.png"), linear-gradient(#fff 0 0);
mask-repeat: no-repeat;
mask-composite: exclude;
mask-position: 50% 20%;
/* Rotate here */
}
</style>我尝试过使用普通的 css 旋转，但这会旋转整个元素。
我认为旋转蒙版图像而不旋转背景的唯一方法是将蒙版图像和背景分离到不同的元素。这是更改后的代码：
<body>
<div class="water">
<div class="light-layer"></div>
</div>
</body>
<style lang="scss">
.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-image: url("https://i.ibb.co/FzmCjLL/Jqtz.png");
mask-repeat: no-repeat;
mask-composite: exclude;
mask-position: 50% 20%;
transform: rotate(30deg);
}
</style>