Multiple rotation directions using CSS rotateX() - css

Question

I've got a simple display that flips over on click. I want to add a little bounce to the movement by rotating a few degrees in the opposite direction before rotating the full 180 degrees to reveal the opposite side.
RotateX() will accept more than one instance inline, but it calculates the end result and does not show both directions. ie:
transform: rotateX(-10deg) rotateX(190deg)
this results in the object rotating 180deg.
I've tried comma separating them, as well as just putting two sets of degress in the parens, with similar results.
I've tried putting both steps into #keyframes, but animation doesn't seem to work with my on-click event in javascript.
I've also tried having each direction of rotation in a separate class that are both activated via classlist.toggle, but still do not see both directions of rotation.
here's a codepen with the above mocked up:
https://codepen.io/Boreetos22/pen/WNrJEvR
I'd appreciate any insight. Thanks!

Answer 1

Transitions probably won't get what you want since you can't fake the bounce with multiple steps. #keyframes will work but you can't simply toggle the class. You need to add one and then add another to reset it.
Also, you'll need multiple animations (forward and back) that you change on over/out and click.
let sides = document.querySelector('.sides');
sides.addEventListener( 'click', function(e) {
if(sides.classList.contains('flip-forward')){
sides.classList.remove('flip-forward');
sides.classList.add('flip-backward');
}else{
sides.classList.add('flip-forward');
sides.classList.remove('flip-backward');
}
});
* {
padding: 0;
margin: 0;
}
h2 {
margin-top: 12px;
font-size: 30px;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
height: 60px;
width: 400px;
perspective: 1000px;
}
#keyframes myAnimationFwrd {
/* has bounce */
24% {
transform: rotateX( -40deg)
}
36% {
transform: rotateX( 0)
}
100% {
transform: rotateX( 190deg)
}
}
#keyframes myAnimationBkwrd {
/* no bounce add more steps to enable */
0% {
transform: rotateX( 190deg)
}
100% {
transform: rotateX( 0deg)
}
}
.flip-forward {
animation: myAnimationFwrd 1s forwards;
}
.flip-backward {
animation: myAnimationBkwrd 1s forwards;
}
.sides {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
position: relative;
transform-style: preserve-3d;
cursor: pointer;
}
.red, .black {
text-align: center;
color: white;
height: 100%;
width: 100%;
border-radius: 30px;
box-shadow: 2px 2px 4px black;
position: absolute;
backface-visibility: hidden;
}
.red {
background-color: darkred;
z-index: 2;
}
.black {
background-color: black;
z-index: 1;
transform: rotateX(180deg);
}
<div class="container">
<div class="sides">
<div class="red">
<h2>PLAYER ONE'S TURN</h2>
</div>
<div class="black">
<h2>PLAYER TWO'S TURN</h2>
</div>
</div>
</div>