掩蔽+用CSS旋轉

我需要旋轉一個旋轉輪，以便只有輪的一個部分（同一部分）始終可見。我試圖用div1中的蒙版來完成此操作，而旋轉div2。掩蔽+用CSS旋轉

<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旋轉。

任何導致此行爲發生的原因？

來源

2016-09-25 aaaaa

我認爲你看到的是旋轉的div背景的大小是根據父div（mask 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; 
}

來源

2016-09-25 11:37:40 Ma3x

掩蔽+用CSS旋轉

回答

相關問題