Flipping Animation Classes

Understanding the Flip Animation

This animation consists of four essential components:

1. flip - The outer container that creates and maintains the 3D perspective
2. flipper - The inner element that physically rotates during the animation
3. front - The visible face before flipping occurs
4. back - The hidden face that becomes visible after flipping

Without these elements, the animation cannot function properly.

How flip Works

• The flip class sets the base dimensions for the animation.
• Its height can range from 1px to 2000px, depending on your needs using QuickCSS height utillies such as h-1 to h-2000.
• The width is set to 100%, meaning it automatically adjusts to fit the width of its parent container. This ensures the animation scales seamlessly within any layout.

<div class="flip">
    <div class="flipper">
        <div class="front your custom classes here">This is where your object goes</div>
        <div class="back your custom classes here">This is where your back content goes</div>
    </div>
</div>