CODEWITHSUNDEEP
htmlcssrotationmaskcss-transforms
aaaaa
aaaaa

Reputation: 1

Masking + Rotation with CSS

I need to rotate a spinning wheel so that only one part (the same part) of the wheel is always visible. I am trying to accomplish this with a mask in div1 while div2 is rotated. 

<div1 id="maskedDiv"> 
  <div2 id="rotatedDiv">

  </div2>
<div1>

However, while the rotation works fine, the masking gives me very strange results. The CSS I am using to create a mask is 

-webkit-clip-path: polygon(58% 43%, 70% 59%, 82% 83%, 88% 100%, 100% 74%, 91% 43%, 84% 26%, 67% 5%, 53% 0%, 39% 0%, 20% 22%, 8% 48%, 0% 71%, 10% 100%, 31% 55%);

which I want to look like this, with the blue areas visible - gives me seemingly randomly masked locations, which change as div2 rotates.

Any leads as to why this behavior is occuring?

Upvotes: 0

Views: 1823

Answers (1)

Ma3x
Ma3x

Reputation: 6559

I think what you are seeing is that the size of the rotated div's background is set based on the size of the parent div (the mask div). Then when you are rotating the inner div the edges will show through the mask and you might think that the mask polygon changes.

To get around this limitation make the parent div bigger and reduce the mask polygon size so it doesn't get close to the edges of the div. If you are using an image for the rotating background you can just make sure the image has a transparent background or that its background matches the parent div background color or the outer (page) background color, depending of the effect you want to achieve.

Here is a demo of all 3 "effects". The first one being the "broken" effect, due to the clipping mask being too close to the edges of the parent div: http://jsfiddle.net/kLhvhoqm/

You will also need to make sure that the inner div uses the full size of the parent div:

#maskedDiv {
    position: relative;
    overflow: hidden;
}

#rotatedDiv {
    /* make sure the rotating div uses the full size of the parent div */
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Upvotes: 1

Related Questions