Article Categories

Selected Reading

Design a Rotating card effect using HTML and CSS

HTML CSS Web Development Front End Technology

The rotating card effect creates an engaging visual experience where cards spin when you hover over them, revealing additional content on the back side. This effect is achieved using CSS 3D transforms and transitions.

Syntax

.card-container {
    perspective: value;
}

.card {
    transform-style: preserve-3d;
    transition: transform duration;
}

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

.card-side {
    backface-visibility: hidden;
}

Key CSS Properties

Property	Description
`perspective`	Defines the distance from the viewer to the 3D element
`transform-style: preserve-3d`	Maintains 3D positioning of child elements
`backface-visibility: hidden`	Hides the back face of rotated elements
`transform: rotateY()`	Rotates element around the Y-axis

Example: Basic Rotating Card

The following example creates a card that rotates 180 degrees on hover, revealing content on the back side

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: #f0f0f0;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }
    
    .card-container {
        width: 300px;
        height: 200px;
        perspective: 1000px;
    }
    
    .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        cursor: pointer;
    }
    
    .card:hover {
        transform: rotateY(180deg);
    }
    
    .card-front,
    .card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        font-weight: bold;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
    
    .card-front {
        background: linear-gradient(45deg, #3498db, #2980b9);
        color: white;
    }
    
    .card-back {
        background: linear-gradient(45deg, #e74c3c, #c0392b);
        color: white;
        transform: rotateY(180deg);
    }
</style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <div class="card-front">
                Front Side
            </div>
            <div class="card-back">
                Back Side
            </div>
        </div>
    </div>
</body>
</html>

A blue card with "Front Side" text appears. When you hover over it, the card smoothly rotates to reveal a red "Back Side" with the text centered.

Example: Information Card with Content

Here's a more practical example showing how to create an information card with actual content

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background: #2c3e50;
        font-family: 'Arial', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }
    
    .info-card-container {
        width: 350px;
        height: 250px;
        perspective: 1200px;
    }
    
    .info-card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.8s ease;
    }
    
    .info-card:hover {
        transform: rotateY(180deg);
    }
    
    .info-front,
    .info-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 15px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    }
    
    .info-front {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .info-front h2 {
        margin: 0 0 10px 0;
        font-size: 28px;
    }
    
    .info-front p {
        margin: 0;
        font-size: 16px;
        opacity: 0.9;
    }
    
    .info-back {
        background: linear-gradient(135deg, #f093fb, #f5576c);
        color: white;
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .info-back h3 {
        margin: 0 0 15px 0;
        font-size: 24px;
    }
    
    .info-back ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .info-back li {
        margin: 8px 0;
        font-size: 14px;
        padding-left: 15px;
        position: relative;
    }
    
    .info-back li:before {
        content: "?";
        position: absolute;
        left: 0;
        color: #fff;
    }
</style>
</head>
<body>
    <div class="info-card-container">
        <div class="info-card">
            <div class="info-front">
                <h2>Web Design</h2>
                <p>Hover to see details</p>
            </div>
            <div class="info-back">
                <h3>Skills Include:</h3>
                <ul>
                    <li>HTML5 & CSS3</li>
                    <li>Responsive Design</li>
                    <li>JavaScript</li>
                    <li>UI/UX Principles</li>
                    <li>Cross-browser Testing</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

A purple gradient card with "Web Design" title appears. On hover, it smoothly rotates to reveal a pink gradient back side with a detailed skills list including checkmarks.

Conclusion

The rotating card effect enhances user engagement by revealing additional content through smooth 3D transitions. The key is combining CSS 3D transforms with proper perspective and backface visibility settings to create a seamless flip animation.

Yaswanth Varma

Updated on: 2026-03-15T18:07:13+05:30

724 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next