Html 在CSS中旋转排除的蒙版图像

发布于01月11日

我在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>