3D CSS Cards with Hover Effect

Welcome to Coding Torque, your go-to destination for all things coding and web development. In this blog post, we’re excited to showcase an exciting and visually stunning feature of CSS – 3D CSS cards with hover effect. With just a few lines of code, you can create eye-catching and interactive cards that will make your website stand out from the crowd. Whether you’re a seasoned developer looking to brush up on your skills or a newcomer to the world of CSS, this tutorial is sure to be a fun and rewarding experience. So sit back, grab your favorite beverage, and let’s dive into the world of 3D CSS cards!

Before we start here are some more articles you might like to read-

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>3D CSS Cards with Hover Effect - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="card-container">
  <div class="card">
    <h3>Hover me</h3><br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores sapiente non asperiores deleniti, quos eos placeat corarupti id consequatur ullam accusantium, nesciunt aut fugiat at ipsam harum eveniet dolore.</p>
    <div class="layers">
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>   
    </div>
  </div> 
</div>

<div class="card-container">
  <div class="card">
    <h3>Hover me</h3><br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores sapiente non asperiores deleniti, quos eos placeat corrupti id consequatur ullam accusantium, nesciunt aut fugiat at ipsam harum eveniet dolore.</p>
    <div class="layers">
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>
      <div class="layer"></div>   
    </div>
  </div> 
</div>

CSS Code

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Raleway, sans-serif;
  display: flex;
  align-items: center;  
  min-height: 100vh;
  background-color: #ddd;
}

.card-container {
  perspective: 50em;
  
  &:nth-child(1) { --bi: repeating-linear-gradient(30deg, #111 0 0.25em, #333 0 1em); }
  &:nth-child(2) { --bi: linear-gradient(#555 5em, #0000 3em), linear-gradient(60deg, #880E4F, #1A237E); }
}

.card {
  position: relative;
  width: 320px;
  padding: 3em;
  color: #fff;
  transform: rotateY(30deg) rotateX(15deg);
  transform-style: preserve-3d;
  transition: transform 1s;
  
  &:hover {
    transform: rotateY(-30deg) rotateX(-15deg);
  }
}

.layers {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  z-index: -1;
}

.layer {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border-radius: 1em;
  background-image: var(--bi);
  transform: translateZ(var(--tz));
  box-shadow: 0 0 0.5em #000d inset;
  
  @for $i from 0 to 10 {
    &:nth-child(#{$i + 1}) {
      --tz: #{$i * -4}px;
    }
  }
  
  &:last-child {
    box-shadow: 0 0 0.5em #000d inset, 0 0 5px #000;
  }
}

Output Till Now

Written by: Piyush Patil

Code Credits: @amit_sheen

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖