Не могу повернуть 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

Решением было добавление "переполнения: скрытый" для держателя. Я не знаю, является ли это лучшим решением, но оно сработало.