I utilized this specific example to create a captivating 3D flip animation.
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click on the card to see it flip.</p>
The implementation of the following CSS:
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
In my scenario, there are forms present on both faces. Without any material, everything performs as expected.
Interactive demo without using any material
However, upon introducing material, I encountered an issue where the input fields on the back face were inaccessible (click "Sign up" to view the flip).
Demo incorporating Material UI components
It appears that the input fields from the front side are somehow interfering with those on the back face. Despite attempting to adjust the z-index, the problem persists. Any advice or assistance on this matter is highly appreciated!
Update: It was likely an oversight on my part; setting a proper z-index on the faces seems to resolve the issue: View updated solution here