Can't rotate3d an element with clipped-path parent

Question

Is this possible to rotate (rotateX or rotateY) an element, even parent being masked(clip-path)? Like this:

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);
}

I made an example with my problem.

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

Thank you

Answer 1

The solution was adding "overflow:hidden" to the holder. I don't know if this is the better solution, but it worked.