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.

Also Read- 3D Carousel in CSS

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.

The source code is on Github.

If you like this post or find it helpful then please share it with your friends and comment. It helps to motivate me.