I have been following a tutorial regarding CSS flip effects and encountered some challenges. The tutorial can be found here.
.flip-container {
perspective: 1000px;
}
/* add more code here... */
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content goes here -->
</div>
<div class="back">
<!-- back content goes here -->
</div>
</div>
</div>While the implementation works for the most part, I am facing an issue where the content flips out of the page instead of remaining in its original position post-flip.
https://i.sstatic.net/8kUpQ.png
Furthermore, after the flip, a significant portion of the content moves off the page as shown here.
In addition, I aim to create a flipboard-like animation based on this example and would appreciate any tutorials or code snippets that could help achieve this effect!