How to create a 3d card flipping effect with vanilla HTML and CSS

In this article, I will show you how to create a 3d card flipping effect with vanilla HTML and CSS.

Demo

Video Tutorial

I have already made a video about it on my youtube channel. Check that out.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

HTML

<div class="flip-box">
    <div class="flip-box-inner">
        <div class="flip-box-front">
            <img src="1.webp" alt="Paris" />
        </div>
        <div class="flip-box-back">
            <h1>Taylor Swift</h1>
        </div>
    </div>
</div>

Explanation:

• flip-box is the parent element. It will stay the same.
• flip-box-inner is the child element. It will actually rotate.
• flip-box-front is the front part and will be visible.
• flip-box-back is the back part and will be hidden.

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 3rem;
}

.flip-box {
    background-color: transparent;
    width: 60vw;
    perspective: 1000px;
    cursor: pointer;
}

Explanation:

• Some basic styles to center the flip-box.
• perspective property is for the 3d effect. I don't understand how it works but it works.

Learn more about perspective property here.

.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 52.65%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

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

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Explanation:

• flip-box-inner is position relative. The front and the back element will be positioned relative to the parent element.
• padding-top is 52.65% of the parent element. This is for maintaining the ratio so that our image stays responsive. If you want to learn more in depth, you can watch the following video.

• transform-style is preserve-3d. This is for maintaining the 3d effect.

.flip-box-front,
.flip-box-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.flip-box-front {
    color: black;
}

.flip-box-back {
    background-color: #ff6f00;
    color: white;
    transform: rotateY(180deg);
    display: grid;
    align-content: center;
}

@media screen and (max-width: 600px) {
    .flip-box-inner {
        padding-top: 100%;
    }
    .flip-box {
        width: 90vw;
    }
}

Explanation:

• flip-box-front and flip-box-back are aligned with the parent element.
• backface-visibility is for hiding the backside of the element when we will rotate.
• transform: rotateY(180deg); is for rotating the back element. Because we want the front element to be visible when the page loads
• Finally some code for media queries.

Final Result

Shameless Plug

Want to create your own blog? Well, I am creating a video series where you will learn about how to create a JAMstack blog with Nextjs and Chakra-UI.

Lessons

• Intro & Setup
• Build Homepage UI
• How our app will work
• MDX, MongoDB, Static Homepage
• Generate Static Blog Page
• Style Blog page with Chakra-UI and MDX-embed
• Build a real-time view counter
• Autocomplete search form with MongoDB Atlas Search Index
• Deploy application to Vercel

Demo

You can demo the website from here

Features

• Static Blog pages will make the website load faster.
• Blogs will have code blocks with syntax highlighting and many embed components like youtube videos, GitHub gist, Tweets, and so many other things.
• Autocomplete search feature for the blog posts.
• Real-time view counter and so on.

Please like and subscribe to Cules Coding. It motivates me to create more content like this.

That's it for this blog. I have tried to explain things simply. If you get stuck, you can ask me questions.

By the way, I am looking for a new opportunity in a company where I can provide great value with my skills. If you are a recruiter, looking for someone skilled in full-stack web development and passionate about revolutionizing the world, feel free to contact me. Also, I am open to talking about any freelance project. I am available on Upwork

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram (personal): @thatanjan
• Twitter: @thatanjan
• Upwork: @thatanjan

Blogs you might want to read:

• Eslint, prettier setup with TypeScript and react
• What is Client-Side Rendering?
• What is Server Side Rendering?
• Everything you need to know about tree data structure
• 13 reasons why you should use Nextjs
• Beginners guide to quantum computers

Videos might you might want to watch: