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

Copy
1<div class="flip-box">
2    <div class="flip-box-inner">
3        <div class="flip-box-front">
4            <img src="1.webp" alt="Paris" />
5        </div>
6        <div class="flip-box-back">
7            <h1>Taylor Swift</h1>
8        </div>
9    </div>
10</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

Copy
1* {
2    padding: 0;
3    margin: 0;
4    box-sizing: border-box;
5}
6
7body {
8    display: grid;
9    place-items: center;
10    min-height: 100vh;
11    overflow: hidden;
12    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13}
14
15h1 {
16    font-size: 3rem;
17}
18
19.flip-box {
20    background-color: transparent;
21    width: 60vw;
22    perspective: 1000px;
23    cursor: pointer;
24}

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.

Copy
1.flip-box-inner {
2    position: relative;
3    width: 100%;
4    height: 100%;
5    padding-top: 52.65%;
6    text-align: center;
7    transition: transform 0.8s;
8    transform-style: preserve-3d;
9}
10
11.flip-box:hover .flip-box-inner {
12    transform: rotateY(180deg);
13}
14
15img {
16    width: 100%;
17    height: 100%;
18    object-fit: cover;
19}

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.

Copy
1.flip-box-front,
2.flip-box-back {
3    position: absolute;
4    top: 0;
5    left: 0;
6    width: 100%;
7    height: 100%;
8    -webkit-backface-visibility: hidden; /* Safari */
9    backface-visibility: hidden;
10}
11
12.flip-box-front {
13    color: black;
14}
15
16.flip-box-back {
17    background-color: #ff6f00;
18    color: white;
19    transform: rotateY(180deg);
20    display: grid;
21    align-content: center;
22}
23
24@media screen and (max-width: 600px) {
25    .flip-box-inner {
26        padding-top: 100%;
27    }
28    .flip-box {
29        width: 90vw;
30    }
31}

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

I have made an Xbox landing page clone with React and Styled components. I hope you will enjoy it. Please consider like this video and subscribe to my channel.

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

Contacts

• Email: thatanjan@gmail.com
• LinkedIn: @thatanjan
• Portfolio: anjan
• Github: @thatanjan
• Instagram : @thatanjan
• Twitter: @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: