Hello everyone! Welcome to today’s tutorial. In today’s tutorial, we will learn how to create Responsive Cards. These cards come with a beautiful 3D effect. Moreover, we need only HTML and CSS to create this stunning effect.
I have a whole playlist of tutorials on 3D effects created with CSS. You can check those tutorials here.
Video Tutorial:
If you would like to code along with me, you can watch the video version of this tutorial down below. Also, I post new and exciting tutorials on my youtube channel regularly. So I would suggest you subscribe to my youtube channel so, you don’t miss any of these tutorials.
Project Folder Structure:
Before we begin the actual coding, let us first create the project folder structure. We create a project folder called – Responsive 3D Cards. Inside this folder, we have two files – index.html and style.css. The first is the HTML document and, the second is the stylesheet.
Other Tutorials You Might Like:
- 3D Flip Birthday Card With HTML And CSS
- Responsive Count Up Animation
- 3 Background Patterns Using CSS
Along with these files we also have three image files. These are icons we will be using in our cards. Alternatively, you can even use Font Awesome Icons. The icons I am using for this project are by freepik from flaticon.
HTML:
We start by creating the structure of the cards using HTML. Now copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive 3D Cards</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section>
<div class="container">
<div class="card">
<div class="front">
<div class="content">
<img src="research-img.png" />
<h3>RESEARCH</h3>
</div>
</div>
<div class="back">
<div class="content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
nam expedita exercitationem?
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="front">
<div class="content">
<img src="design-img.png" />
<h3>DESIGN</h3>
</div>
</div>
<div class="back">
<div class="content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
nam expedita exercitationem?
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="front">
<div class="content">
<img src="develop-img.png" />
<h3>DEVELOP</h3>
</div>
</div>
<div class="back">
<div class="content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
nam expedita exercitationem?
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS:
To make the cards look stylish and add the 3D effect, we use CSS. First, copy the code provided below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #151320;
}
section {
height: 100vh;
display: flex;
padding: 0 4em;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.container {
perspective: 1000px;
height: 28vh;
width: 100%;
cursor: pointer;
}
.card {
transform-style: preserve-3d;
height: 100%;
width: 100%;
transition: 0.5s ease;
}
.front,
.back {
height: 100%;
width: 100%;
transform-style: preserve-3d;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 0.4em;
position: absolute;
top: 0;
bottom: 0;
backface-visibility: hidden;
}
.front {
background: linear-gradient(to right, #a246ef, #6523fe);
}
.front img {
width: 5em;
}
.content {
transform: translateZ(60px);
}
.content h3 {
font-size: 22px;
margin-top: 1em;
font-weight: 600;
letter-spacing: 0.04em;
}
.content p {
font-size: 14px;
line-height: 2em;
letter-spacing: 0.02em;
padding: 0 3em;
}
.back {
background-color: #28253a;
transform: rotateX(180deg);
}
.container:hover .card {
transform: rotateX(180deg);
}
@media screen and (min-width: 992px) {
section {
padding: 0 1em;
}
.container {
flex-basis: 0 0 33.33%;
max-width: 33.33%;
padding: 0 1.5em;
}
}
That’s it your responsive cards with 3D effect are now ready. You can go ahead and customize the colours and typography to suit your need. If you face any issues while creating this project, you can download the source code by clicking on the download code button below.
I would love to hear from you guys. So if you have any suggestions, feedback, or questions don’t forget to drop them in the comments below. Stay tuned for more exciting tips, tricks and tutorials.
Happy Coding!
