html - 如何透明地遮盖对象，以便仅背景可见？

描述

我用CSS3过渡和转换创建了动画。这是一个旋转的块，看起来其底部在移动时被修整了。我希望修剪的部分显示旋转块后面的实际内容，例如背景。我通过在红色块上创建另一个白色块来实现了一半的解决方案，因此背景的白色看起来像是自己消失了，但是实际上这只是一种“幻觉”，并且仅在背景仅使用一种颜色时才起作用。

我的问题是，如何通过实际“修剪”动画而不是覆盖动画来实现相同的目的？因此，如果我将可爱的小猫放在旋转的盒子下面，不会有白色的盒子挡住我的小猫，但底部仍会修剪。

请注意：这些只是问题的演示。我正在寻找一种可以从动画中修剪另一个对象的解决方案。因此，即使白色块位于旋转的三角形内部或为圆形，它也应该起作用。

JSFiddles可用于the original和the cute version。

结果

看起来不错



小猫乞求解决方案



目标



当然，这是一个示例输出。修剪的部分可能在纺纱块的中间。

资源

的HTML

<div id="block"></div>
<div id="mask"></div>

的CSS

block {
    height: 100px;
    width: 100px;
    background-color: red;
    z-index: -1;
    position: relative;
    transition: transform 1000s 0s linear;
}

#mask {
    height: 100px;
    width: 100px;
    background-color: white;
    z-index: 1;
    position: relative;
}

.block-animate {
    transform: rotate(-144000deg);
}

的JavaScript

document.getElementById('block').className += ' block-animate';//Auto start animation.

最佳答案

要触发z-index，您需要将位置重置为相对，固定或绝对。

DEMO

#mask {
    height: 100px;
    width: 100px;
    background-color: white;
    z-index: 1;
    position:relative;/* to trigger z-index */
}

看起来像最后一个例子，背景位置可能很有效。
DEMO box cut off from background

基本上：

body {
    background: url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    background-repeat: no-repeat;
}

#mask {
    height: 100px;
    width: 100px;
    background:url('http://takeinsocialmedia.com/wp-content/uploads/2014/02/cute-kitten-images-photos-0223204033.jpg') fixed;
    background-size:100vw auto;
    z-index: 1;
    position:relative;
}

不幸的是，这对background-size:cover;不起作用，因为body和#mask具有不同的大小。 background-size将需要通过javaScript onload和onresize设置为#mask。