Html Question posted in
Some basic documentation can be found here.

Html – Rotate an excluded mask-image in css

I have a mask-image in CSS that I can easily position with the mask-position property, but I can’t figure out how to rotate it. How can I rotate the mask-image without rotating the entire element?

Here is my code:

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

I’ve tried using normal css rotate but that rotates the entire element.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out myself using svg mask and transform. Took me a good while. Here is the code sandbox i created: Link


  2. 0

    I think the only way to rotate the mask image without rotating the background is to separate the mask image and background to different elements. Here is the changed code:

    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search