How to Create 3D CSS Cards With Hover Effect

torque-programming 0 Comments 3D Card, CSS, How to Create 3D CSS Cards With Hover Effect, HTML5 3 min read

How to Create 3D CSS Card With Hover Effect. Welcome to Torque Programming, where we talk about coding and web development. Today, we’re going to talk about a cool feature in CSS called 3D CSS cards with hover effect. By writing a few lines of code, you can make your website look amazing and interactive. Even if you’re new to CSS, don’t worry! This tutorial will be fun and easy to follow. So, grab a drink and let’s get started.

How to Create 3D CSS Cards With Hover Effect

HTML Code

Step 1 write Basic Structure of HTML code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Create 3D CSS Cards with Hover Effect - Torque Programming</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

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

Paste the below code in your 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>

Output Till Now

How to Create 3D CSS Cards With Hover Effect Torque Programming — How to Create 3D CSS Cards With Hover Effect

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;
  }
}

Code Credits: @amit_sheen

You May Also Like

How to Create 3D CSS Cards With Hover Effect

Recommended Post

Leave a Reply Cancel reply

Read Next