使用css/javascript进行图像掩蔽

Question

有没有可能将一个div转换成这个kind of shape，然后用图像填充它？或者更好地将图像转换为该形状？都使用CSS或Javascript。然后在此manner中排列多个

我打算根据第二张图片将形状分成几个环。至于图片，它将是动态的，所以不能真正地预先剪切它们。

*编辑:我找到了我真正想要的效果。它实际上是在掩饰。在webkit中，这个css属性：-webkit-mask-box-image工作得很好(我也可以使用.png图像作为遮罩)，但当我尝试屏蔽火狐(使用Illustrator生成的.svg文件)时，它似乎不起作用。使用-webkit- .svg -box-image css属性可以在Chrome中使用相同的掩码文件

Answer 1

是的，这是可能的。即使不使用任何JavaScript或浏览器特定的属性。

我已经测试过了，它可以在所有当前版本的Chrome，IE，FF，Opera，Safari上运行(在Windows7上)。

这个想法是让多个轮子具有不同角度的切片(使用倾斜变换获得角度；切片也使用旋转变换进行旋转)。内轮覆盖了外轮的中心部分。

我制作的版本是一个非常简单的版本，有两个轮子，内轮的8个图像(这意味着内轮的每个切片有360°/8 = 45°)和外轮的12个图像(=>外部的每个切片有360°/12 = 30°)。

相关超文本标记语言

<div class='picture-wheel'>
    <div class='outer-wheel wheel'>
        <div class='slice'><div class='bg'></div></div>
        <!-- the rest of the slices, 11 more for this demo -->
        <div class='inner-wheel wheel'>
            <div class='slice'><div class='bg'></div></div>
            <!-- the rest of the slices, 7 more for this demo -->
            <div class='cover-wheel wheel'></div>
        </div>
    </div>
</div>

相关CSS

.wheel {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 1em;
}
.picture-wheel {
    width: 30em; height: 30em;
    margin: 3em auto 0;
}
.slices-wrapper { 
    position: absolute;
    width: 100%; height: 100%;
}
.slice {
    overflow: hidden;
    position: absolute;
    bottom: 50%; right: 50%;
    transform-origin: 100% 100%;
}
.outer { width: 30em; height: 30em; }
.inner-wheel {
    transform: rotate(7.5deg);
    width: 21em; height: 21em;
    margin: 4.5em;
}
.cover-wheel {
    width: 12em; height: 12em;
    margin: 4.5em;
    box-shadow: inset 0 0 1em;
    background: white;
}
.bg {
    border-radius: 50%;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 8em 6em;
}
.outer-wheel > .slice {
    width: 15em; height: 15em;
    transform: skewY(60deg);
}
.outer-wheel > .slice:nth-child(2) { transform: rotate(30deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(3) { transform: rotate(60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(4) { transform: rotate(90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(5) { transform: rotate(120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(6) { transform: rotate(150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(7) { transform: rotate(180deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(8) { transform: rotate(-150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(9) { transform: rotate(-120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(10) { transform: rotate(-90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(11) { transform: rotate(-60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(12) { transform: rotate(-30deg) skewY(60deg); }
.outer-wheel > .slice .bg {
    width: 30em; height: 30em;
    transform: skewY(-60deg) rotate(-15deg);
}
.outer-wheel > .slice .bg {
    background-image:
        url(image-for-first-slice-outer.jpg);
}
.outer-wheel > .slice:nth-child(2) .bg {
    background-image:
        url(image-for-second-slice-outer.jpg);
}
/* background images for the other slices of the outer wheel */
.inner-wheel > .slice {
    width: 10.5em; height: 10.5em;
    transform: skewY(45deg);
}
.inner-wheel > .slice:nth-child(2) { transform: rotate(45deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(3) { transform: rotate(90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(4) { transform: rotate(135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(5) { transform: rotate(180deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(6) { transform: rotate(-135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(7) { transform: rotate(-90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(8) { transform: rotate(-45deg) skewY(45deg); }
.inner-wheel > .slice .bg {
    width: 21em; height: 21em;
    transform: skewY(-45deg) rotate(-22.25deg);
}
.inner-wheel > .slice .bg {
    background-image:
        url(image-for-first-slice-inner.jpg);
}
.inner-wheel > .slice:nth-child(2) .bg {
    background-image:
        url(image-for-second-slice-inner.jpg);
}
/* background images for the other slices of the inner wheel */

另一个略有不同的增强版本：

Answer 2

我可以尝试使用Canvas元素并绘制

http://jsfiddle.net/m6QgV/6/

下面是一个例子

Answer 3

看一看CSS3转换。您应该能够使用标准矩阵转换(类似于在OpenGL或DirectX中的方法)来完成此操作。