What you will be learning?

  • Learn to create card 3D Card Stacking Animation
  • Learn to use  :nth-child() Selector
  • Learn little bit about Flexbox important properties
  • Learn about rotation, Skew and transform property

Quick Introduction

After having my lunch done I was just chilling and surfing codepen there I saw a 3D card stacking effect and it is done using CSS only. It looks really cool! So I thought to recreate and explain the whole code for you guys.

So this post is inspired by Maknun Khan’s Pen.

You can also check out: Awesome Liquid Distortion Effect

Here’s What we are Making:

3d card stacking animations

Code Explanation for Card Stacking Animation:

HTML

    <div class="layer">
      <img src="phone.svg" alt="" />
      <img src="phone.svg" alt="" />
      <img src="phone.svg" alt="" />
      <img src="phone.svg" alt="" />
    </div>

HTML is very simple, I have just repeated that phone mockup image four times and wrapped under .layer class which will be used to hold the image in one place.

General CSS Styling

/* General Styling */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: space-around;
  font-size: 1.5rem;
  background-color: royalblue;
  color: wheat;
  flex-wrap: wrap;
}

The above code just removes default margin, padding, and sets box-sizing to border-box.

body just using flexbox property to center the whole content. The align-items: center centers the object along the cross-axis and justify-content: space-around centers the object along the main-axis. And flex-wrap property moves the content to space below which increases responsiveness.

Layer Styling

Cool 3D Card Stacking Animation Using CSS only 1 » Csspoint101
.layer {
  position: relative;
  width: 230px;
  height: 350px;
  margin-right: 10%;
  margin-top: 2%;
  background-color: rgb(10, 10, 10);
  transform: rotate(-30deg) skew(30deg) scale(0.8);
  border-radius: 30px;
}
.layer img {
  width: 100%;
  transition: all ease 500ms;
  position: absolute;
}

.layer class is used to create a black shape in which we will place our image. This black image-holder makes it easy to understand to play with width, height rotation values. After placing the image we will just comment out the background-color property.

transform: rotate(-30deg) skew(30deg) scale(0.8) This line of code is the most important in creating this card stacking animation because it rotates the phone mockup in that angle.

rotate(-30deg) rotates the image in right direction

skew(30deg) Streches the image to 30deg

scale(0.8) Reduces the image size from default so that layer don’t overflow in Y-axis.

And transition property is used to make the animation look smoother

And I made .layer position relative because we want our image to inherit the shape of parent class which is .layer. And fit in the width by giving width: 100%;

Hover Animation CSS


/* Hover effect for stacking effect */
.layer:hover img:nth-child(1) {
  transform: translate(100px, -100px);
  opacity: 0.4;
}
.layer:hover img:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: 0.6;
}
.layer:hover img:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: 0.8;
}
.layer:hover img:nth-child(4) {
  transform: translate(160px, -160px);
  opacity: 1;
}

The order of the child is from the bottom image to the top. So when you hover the phone, the bottom image is the first child and so on.

The basic logic is to move up the same image at different values or positions and reduce its opacity to achieve that 3D Card stacking animation.

:nth-child() CSS selector makes every element inside parent div its child and gives them numbering from top to bottom. Read more about- :nth-child()

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

transform: translate(100px, -100px) The first value is x-axis value and second value is Y-axis value.

The first value translateX positions an element horizontally on the plane. And translateY positions an element vertically along the axis.

So we just keeps on decreasing the value from uppermost image(4th-child) to the bottom image(1st-child).

That’t it your 3D Card Stacking animation is ready.

If you liked the post on 3D Card Stacking Animation do share with your friends and check out other articles on- Learn to create Custom Cursor and 50+ Best SVG Animation Examples.

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.