无法使用剪切路径父级旋转一个元素

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

解决方案是添加＆＃34;溢出：隐藏＆＃34;持有人。我不知道这是否是更好的解决方案，但它确实有效。