Flipping div in CSS

Introduction 

Creating an interactive effect where a card element on a web page flips or rotates to show material on its reverse is known as flipping div cards. On websites, this effect is frequently employed to display text or graphics. You can use CSS and HTML to do this.

How we can flip div cards?

Set up the HTML structure of your div cards first. Each card will require a pair of div elements one for the front and one for the reverse. 

 <div class="card-container">
        <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 1</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 1</div>
                </div>
            </div>
        </div>
       <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 2</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 2</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 3</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 3</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 4</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 4</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 5</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 5</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 6</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 6</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 7</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 7</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 8</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 8</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 9</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 9</div>
                </div>
            </div>
        </div><div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 10</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 10</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 11</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 11</div>
                </div>
            </div>
        </div> <div class="card">
            <div class="card-inner">
                <div class="card-front">
                    <div class="content">Front Card 12</div>
                </div>
                <div class="card-back">
                    <div class="content">Back Card 12</div>
                </div>
            </div>
        </div>
      
    </div>

To modify and manage the cards' look, add CSS. The initial state of the card, including its size, color, and location, can be set using CSS. You can also set the card's back to be hidden by default.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card {
    width: 70px;
    height: 50px;
    perspective: 1000px;
    flex: 0 0 calc(25% - 10px); / 25% width for four cards with 10px gap /
}

.card-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

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

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-front {
    background-color: #3498db;
    color: white;
}

.card-back {
    background-color: #e74c3c;
    color: white;
    transform: rotateY(180deg);
}

.content {
    padding: 10px;
    text-align: center;
}

Output

Conculsion

To make your div cards more visually appealing on your website, feel free to try out various styles and effects.

If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below. Follow C# Corner to learn more new and amazing things about HTML and CSS or to explore more technologies.

Thanks for reading, and I hope you like it.