Card Flip Animation

Demo

Front Side

Hover or click to flip

Back Side

This is the reverse side

Source Code

HTML

CSS

JavaScript

<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <h3>Front Side</h3>
            <p>Hover or click to flip</p>
        </div>
        <div class="flip-card-back">
            <h3>Back Side</h3>
            <p>This is the reverse side</p>
        </div>
    </div>
</div>

.flip-card {
    perspective: 1000px;
    width: 300px;
    height: 200px;
    margin: 0 auto;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.flip-card-front {
    background: var(--accent);
    color: var(--dark);
}

.flip-card-back {
    background: var(--secondary);
    color: white;
    transform: rotateY(180deg);
}

document.addEventListener('DOMContentLoaded', () => {
    // Tab functionality
    const tabs = document.querySelectorAll('.tab');
    const codeContents = document.querySelectorAll('.code-content');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            codeContents.forEach(c => c.classList.remove('active'));
            
            tab.classList.add('active');
            const tabName = tab.getAttribute('data-tab');
            document.querySelector(`.${tabName}-code`).classList.add('active');
        });
    });
    
    // Card flip functionality
    const flipCard = document.querySelector('.flip-card');
    flipCard.addEventListener('click', () => {
        flipCard.classList.toggle('flipped');
    });
    
    // Reset card button
    document.getElementById('reset-card').addEventListener('click', () => {
        flipCard.classList.remove('flipped');
    });
    
    // Console message specific to this feature
    console.log('%cCard Flip Animation Loaded', 'color: #6e48aa; font-weight: bold;');
});

Usage Notes

Interaction: Click on the card to flip it to the other side
Reset: Use the "Reset Card" button to return the card to its original position
Customization: Modify colors, dimensions, and transition timing in the CSS
Note: To view the source code for this feature, open Chrome DevTools (Inspect) > Sources > CodeVault > HTML(features)/CSS(scripts)/JS(scripts) files.