如何透明地屏蔽对象，以便只显示背景？

Question

描述

我用CSS3过渡和转换创建了一个动画。这是一个旋转块，看起来它的底部部分在移动时被修剪下来。我希望修剪过的部分能够显示旋转块背后的实际内容，例如背景。我通过在红色上面创建另一个白色块来实现半解决方案，因此背景的白色看起来就像它本身消失了，但实际上它只是一个“幻觉”，只有在背景只使用一种颜色时才有效。 / p>

我的问题是如何通过实际“修剪”动画而不是覆盖它来实现相同的目标？所以，如果我把一只可爱的小猫放在我的旋转盒子下面，就没有白色的盒子挡住了我的小猫，但是底部仍然被剪掉了。

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

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.

Answer 1

要触发z-index，您需要将位置重置为：relative，fixed或absolute。

<强> 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需要通过java onload和onresize设置#mask。

Answer 2

您是否尝试使用比红色框更大的z-index使白框不可见？

Answer 3

你走了：http://jsfiddle.net/QxG74/2/ 可爱的套装版本：http://jsfiddle.net/DpfW7/1/

将中心div设置为100像素的高度，并将溢出设置为隐藏。这样旋转的方块就可以在底部修剪。

#center {
   width: 200px;
   height: 100px;
   overflow: hidden;
}