掩蔽+用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旋转

回答

相关问题