3D cards in CSS
3D cards in CSS

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- Pie timer in HTML

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.

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply