3D Card in CSS
3D Card in CSS

Hy Guys, In this blog we are going to create a 3D Card in CSS. 3D Card can be created using CSS. The 3D card gives a unique look to our website. So without wasting our time, Let’s start our work!

Table of Contents

3D Card In CSS

For creating this card we will require two files called index.html & style.css. Now start with the index.html file.

index.html

<!DOCTYPE html>
<head>
  <title>3D Card in CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h3>CodeDesignerWorld</h3><br>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores sapiente
 non asperiores deleniti, quos eos placeat cor 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>
</body>
</html>

In this code inside the <head> tag is our title tag, which shows the title of the page and another one is our link tag which is linking our CSS file.

<head>
  <title>3D Card in CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

Inside the body tag, we have created our parent div with the class name “card-container” which is the topmost div. Inside that div, there is another div with the class name “card” which will contain our card details like heading and other texts.

<div class="card-container">
    <div class="card">
      
    </div> 
  </div>

we had created our title in the h3 tag, “CodeDesignerWorld” and as the other info we had written “lorem ipsum text” inside paragraph (<p>) tag.

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

It was the basic work we had done now it’s time for our layers for that we had created another div with the class name “layers” which will contain all the bottom layers under our card as a 3d effect.

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

we are going to create ten layers under the card so we have created ten dives inside layers class with the class name “layer”.

<div class="card-container">
    <div class="card">
      <h3>CodeDesignerWorld</h3><br>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod maiores sapiente
 non asperiores deleniti, quos eos placeat cor 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>

Our index.html file is done, Let’s create a style.css file and write the code.

style.css

@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;
}
.card-container {
  --bi: linear-gradient(#f2709c ,#ff9472), linear-gradient(60deg, #00d2ff, #3a7bd5);
}

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

.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;
}
.layer:nth-child(1) {
  --tz: 0px;
}
.layer:nth-child(2) {
  --tz: -4px;
}
.layer:nth-child(3) {
  --tz: -8px;
}
.layer:nth-child(4) {
  --tz: -12px;
}
.layer:nth-child(5) {
  --tz: -16px;
}
.layer:nth-child(6) {
  --tz: -20px;
}
.layer:nth-child(7) {
  --tz: -24px;
}
.layer:nth-child(8) {
  --tz: -28px;
}
.layer:nth-child(9) {
  --tz: -32px;
}
.layer:nth-child(10) {
  --tz: -36px;
}
.layer:last-child {
  box-shadow: 0 0 0.5em #000d inset, 0 0 5px #000;
}

First of all, we have imported Google fonts.

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

Universel margin and padding are set to 0 box-sizing set to border-box.

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

For body, we had defined font family as Raleway, sans-serif, the display is set to flex, all items are aligned center, minimum height is set to 100vh and the background color is set to dark gray #ddd.

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

what is vh?

vh stands for viewport height and vw is for viewport width. Hence, setting an element to a width value of 50vw means that the element will have a width that’s 50% of the viewport size, and this stays true when the viewport is resized.

After that, we have to start working with our card-container class, for styling a class we need to put a dot (.) before a class name like .card-container. Inside this class, the perspective value is set to 50 em.
we have created a variable –bi which is used to give a linear gradient background which will be used in other classes later.

.card-container {
  perspective: 50em;
  --bi: linear-gradient(#f2709c ,#ff9472), linear-gradient(60deg, #00d2ff, #3a7bd5);
}

our .card-container class work is done let’s move to .card class, Inside the .card class position is set to relative, transform property is set rotateY(30deg) and rotateX(15deg), transform style is set to preserve-3d, for the transmission effect time is set to 1s.

What is preserve-3d in CSS?

preserve-3d indicates that the children of the element should be positioned in the 3D space.

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

How to apply hover effect in CSS?

To apply a hover effect write the class name with a dot then use a colon (:) after that write hover and code inside curly braces. Inside our hover effect, we are transforming our card and rotating it to Y-axis -30 degree and in X-axis -15 degree.

.card:hover {
  transform: rotateY(-30deg) rotateX(-15deg);
}

for our paragraph, we set the text-align property to justify, which will align text from the left to right corner.

.card p{
  text-align: justify;
}

In the layer’s class, we had also defined transform style to preserve-3d and the z-index is set to -1.

What is z-index?

The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

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

After the .layers we are going to work on .layer class which is a child class of .layers class.
Inside the .layer class, we used the variable –bi as we created in the .card-container class with this we are also using the –tz variable which we will initialize later.

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

we are going to initialize our –tz variable, inside the .layer:nth-child() from 1 to 10 with different values.

What is nth-child() in CSS?

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

n can be a number, a keyword, or a formula.

In simple words, we can say the nth-child selects the element inside the parent class like we had applied it to our .layers class which is used to set –tz variable values different in every .layer class.

.layer:nth-child(1) {
  --tz: 0px;
}
.layer:nth-child(2) {
  --tz: -4px;
}
.layer:nth-child(3) {
  --tz: -8px;
}
.layer:nth-child(4) {
  --tz: -12px;
}
.layer:nth-child(5) {
  --tz: -16px;
}
.layer:nth-child(6) {
  --tz: -20px;
}
.layer:nth-child(7) {
  --tz: -24px;
}
.layer:nth-child(8) {
  --tz: -28px;
}
.layer:nth-child(9) {
  --tz: -32px;
}
.layer:nth-child(10) {
  --tz: -36px;
}

As the nth-child, we had applied last-child to our .layer, which will select the last .layer class. We are selecting this as the last child to apply box-shadow, as shown below.

.layer:last-child {
  box-shadow: 0 0 0.5em #000d inset, 0 0 5px #000;
}

Our Work is complete!

If you are having any issues with this code then visit our GitHub account Click Here!

You Might like this:

We have also created a new course on HTML, just navigate from the navigation menu and click the course.

Hope you like this blog, please comment and subscribe to our newsletter below!

Thank You!

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