Issue
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.
Solution
I figured it out myself using svg mask and transform. Took me a good while. Here is the code sandbox i created: Link
Answered By - PowerKuz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.