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

【问题标题】：Can't rotate3d an element with clipped-path parent无法旋转 3d 具有剪切路径父元素的元素
【发布时间】：2015-07-21 22:46:27
【问题描述】：

这是否可以旋转（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/

谢谢

【问题讨论】：

clip-path 没有得到很好的支持...你用这个做什么？可能有更好的选择。

标签： css clip clip-path

【解决方案1】：

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

【讨论】：