My latest project involves creating a flip effect using CSS, and I need some assistance. You can check out my fiddle link here: https://jsfiddle.net/Munja/db11mmut/
The issue I am facing is that the back side of the element remains hidden until the front side is rotated 180 degrees. I would like to make the back side partially visible during the rotation of the front side to achieve a smoother flip effect. Any suggestions on how to accomplish this would be greatly appreciated!
Here's the code snippet:
.container {
position: relative;
width: 200px;
height: 200px;
}
.container:hover .el{
transform: rotateY(180deg);
}
.el {
position: relative;
display: block;
width: 100%;
height: 120%;
background: #eee;
transition: 0.6s;
transform-style: preserve-3d;
}
.front {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightgreen;
backgace-visibility: hidden;
z-index: 2;
transform: rotateY(0deg);
}
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: left;
background: lightblue;
backgace-visibility: hidden;
transform: rotateY(180deg);
}<div class="container">
<div class="el">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>