CSS로 마스킹 + 회전

Question

휠의 한 부분 (항상 같은 부분) 만 항상 보이도록 회전 휠을 회전해야합니다. div1에있는 마스크를 사용하여 이것을 수행하려고 시도하고있는 동안 div2이 회전되었습니다.

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

    </div2> 
<div1> 

그러나 회전이 잘되는 동안 마스킹은 매우 이상한 결과를 낳습니다. 내가 마스크를 만드는 데 사용하고있는 CSS 내가 볼 파란색 영역으로, this 같이 할

-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%); 

- 저에게 변화 DIV2 회전 등 겉으로는 무작위로 마스크 위치를 제공합니다.

이 문제가 발생하는 이유는 무엇입니까?

Answer 1

내가 본 것은 회전 된 div의 배경 크기가 부모 div (마스크 div)의 크기를 기준으로 설정된다는 것입니다. 그런 다음 내부 div를 회전 할 때 모서리가 마스크를 통해 표시되고 마스크 다각형이 변경된다고 생각할 수 있습니다.

이 제한을 극복하려면 부모 div를 더 크게 만들고 마스크 다각형 크기를 줄여서 div의 가장자리에 가까이 가지 않도록하십시오. 회전하는 배경에 이미지를 사용하는 경우 이미지에 투명 배경이 있거나 해당 배경이 달성하려는 효과에 따라 배경 div 배경색이나 외부 (페이지) 배경색과 일치하는지 확인할 수 있습니다.

다음은 3 가지 "효과"의 데모입니다. 첫 번째는 클리핑 마스크가 부모 div의 가장자리에 너무 가까워서 "부러진"효과입니다. http://jsfiddle.net/kLhvhoqm/

또한 내부 div가 부모의 전체 크기를 사용하는지 확인해야합니다 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; 
}