Today we will create 3D cards in CSS. We will animate the cards with the CSS hover selector. CSS is a great tool to create this type of website effect.
How to create 3D cards in CSS?
Step 1:
First, we will create HTML, file and copy the below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>3D card in CSS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<img src="https://picsum.photos/300/500" alt="card" />
</div>
<div class="container">
<img src="https://picsum.photos/300/501" alt="card" />
</div>
<div class="container">
<img src="https://picsum.photos/300/502" alt="card" />
</div>
</div>
</body>
</html>
Step 2:
Now, we will create a style.css file and copy the below code
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
width: 100%;
justify-content: space-evenly;
perspective: 900px;
}
.container {
width: 300px;
height: 500px;
transform-style: preserve-3d;
transform: rotateX(60deg) scale(0.7);
transition: 0.5s all ease;
box-shadow: 0px 20px 50px #555;
border-radius: 20px;
overflow: hidden;
}
.container:hover {
transform: rotateX(0deg) scale(1) translateY(10px);
}
Boom! You have it.
If you like this post or find it helpful then please share it with your friends and comment. It helps to motivate me.