css - 无法旋转 3d 具有剪切路径父元素的元素

Question

这是否可以旋转（rotateX 或 rotateY）一个元素，即使父级被屏蔽（剪辑路径）？像这样：

html

<div class="holder">
    <div class="square"></div>
</div>

css

.holder{
    -webkit-clip-path: polygon(0px 60%,50% 0px,100% 0px,100% 75%,0px 100%);
}
.square
{
    background-color:red;
    height:500px;
    width:500px;
    transform: rotateY(20deg);
}

我用我的问题做了一个例子。

https://jsfiddle.net/29xecv6c/1/

谢谢

Answer 1

解决方案是将“溢出：隐藏”添加到持有人。我不知道这是否是更好的解决方案，但它确实有效。