Div gets clipped during transform animation - html

Question

I currently have a problem developing an animation.
The point is that I have a big DIV within a smaller DIV that is absolutely positioned. The big DIV is initially hidden and should be displayed with a rotate-X animation when a certain action is performed.
However, during the rotate animation the DIV is cut off and is only displayed completely after the animation.
The same thing happens when the hide animation is played.
With Firefox the DIV is always clipped.
With Chrome the clipping only occurs while the animation ist playing.
The overflow: hidden of the .super-parend DIV is required unfortunately.
Does anyone know a work around for this problem?
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">

Answer 1

I think I found the solution myself:
The perspective: 800px in the .parent div seems to be responsible for the clipping.
When I move the perspective property to the body, the div is fully shown.
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
body {
perspective: 800px;
}
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
/* perspective: 800px; */
perspective-origin: 50% 50%;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(-1deg) translateX(-50%);
transform: rotateX(-1deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">

Answer 2

Are you allowed to change the html structure? Seems everything works if: 1) - div.parent has absolute position and no more children and 2) - there is a super parent div with relative position.
$('#btnShow').on('click', function() {
$('.child').removeClass('hide');
$('.child').addClass('show');
});
$('#btnHide').on('click', function() {
$('.child').removeClass('show');
$('.child').addClass('hide');
});
.super-parent {
overflow: hidden;
height: 100px;
border: 1px dashed red;
}
.super-super-parent {
position: relative;
}
.parent {
width: 100%;
border: 1px solid black;
overflow: visible;
perspective: 800px;
perspective-origin: 50% 50%;
position: absolute;
}
.static-child {
text-align: center;
vertical-align: middle;
}
.child {
position: absolute;
border: 1px solid green;
top: 0;
opacity: 0;
left: 50%;
transform: translateX(-50%);
transform-origin: top;
background: white;
width: 100px;
height: 200px;
text-align: center;
}
.child.show {
animation: swing-in-top-fwd 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
.child.hide {
animation: swing-out-top-bck 0.75s cubic-bezier(0.18, 0.89, 0.41, 1.01) both;
}
input {
margin-top: 50px;
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
100% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg) translateX(-50%);
transform: rotateX(0deg) translateX(-50%);
opacity: 1
}
100% {
-webkit-transform: rotateX(-100deg) translateX(-50%);
transform: rotateX(-100deg) translateX(-50%);
opacity: 0
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="super-super-parent">
<div class="super-parent">
<div class="parent">
<div class="static-child">
01.01.2018
</div>
<div class="child hide">
test
</div>
</div>
<div class="one-more-child">
<p>test text</p>
<p>test text</p>
<p>test text</p>
<p>test text</p>
</div>
</div>
</div>
<input type="button" id="btnShow" value="show">
<input type="button" id="btnHide" value="hide">