I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structure. At this stage, I am solely focusing on Google Chrome for testing purposes.
Feel free to check it out on codepen.
Here is the HTML code snippet:
<div class="wrapper">
<div class="upper">
<div class="upper-current">
<div class="content">
1
</div>
</div>
<div class="upper-next">
<div class="content">
2
</div>
</div>
</div>
<div class="lower">
<div class="lower-current">
<div class="content">
1
</div>
</div>
<div class="lower-next">
<div class="content">
2
</div>
</div>
</div>
</div>
As well as the CSS styling:
div.row {
width: 150px;
height: 200px;
margin: 0 auto;
}
div.wrapper {
background-color: #444;
width: 150px;
height: 200px;
border-radius: 5px;
position:relative;
}
/* More CSS styles... */
I have a vision of achieving a specific effect with this animation, however, my current implementation only results in...