Masking + Rotation with CSS

Question

Мне нужно повернуть вращающееся колесо так, чтобы всегда отображалась только одна часть (одна и та же часть) колеса. Я пытаюсь выполнить это с помощью маски в div1, а div2 повернут.

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

    </div2> 
<div1> 

Однако, пока вращение отлично работает, маскировка дает мне очень странные результаты. CSS Я использую для создания маски является

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

, который я хочу выглядеть this, с голубыми областями видимыми - дает мне, казалось бы, случайно замаскированными места, которые изменения как div2 вращается.

Любые указания относительно того, почему такое поведение происходит?

Answer 1

Я думаю, что вы видите, что размер фона повернутого div установлен на основе размера родительского div (маски div). Затем, когда вы вращаете внутренний div, края будут отображаться через маску, и вы можете подумать, что полигон маски изменяется.

Чтобы обойти это ограничение, увеличьте родительский div и уменьшите размер полигона маски, чтобы он не приблизился к краям div. Если вы используете изображение для вращающегося фона, вы можете просто убедиться, что изображение имеет прозрачный фон или его фон соответствует цвету фона родительского div или внешнему (страница) цвета фона, в зависимости от эффекта, который вы хотите достичь.

Это демо всех 3-мерных эффектов. Первый из которых является «сломанным» эффект, из-за маски вырезки слишком близко к краям родительского DIV: http://jsfiddle.net/kLhvhoqm/

Вы также должны убедиться, что внутренний ДИВ использует полный размер родителя 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; 
}