3D Card Effect - HTML/CSS

#html #css #webdev #tutorial

Hello Everyone today I will show you how to create a 3d card effect with HTML and CSS. I followed Kevin Powell's Youtube tutorial and did some minor changes, I recommend watching the tutorial for a better understanding, Link is attached below.

Credit - Kevin Powell
Youtube - https://youtu.be/Z-3tPXf9a7M

Let's get started...

Working Demo -

HTML -

<div class="effect">
  This is a 3d Card
</div>

Well it's just a simple Div with some text.

CSS -

For CSS I will only explain the main part, the rest of the code you can see in the code pen example above.

.effect{
  position:relative;
  color:white;
  padding:2rem;
  background-image:linear-gradient(to right,crimson,purple,rebeccapurple);
  width:200px;
  height:100px;
  border-radius:20px;
  font-size:2rem;
  transform-style: preserve-3d;
  transform:perspective(5000px) rotateX(-10deg) rotateY(45deg)
}

transform-style property will make the element preserve its 3d state.
transform perspective will create an effect that makes it look away from the user in 3d space (probably z-axis).

.effect::before,
.effect::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  transform:translateZ(-60px);
}

we will be using before and after pseudo selectors to create the background space for the card.

.effect::before{
  background-image:linear-gradient(to right,white,lightgrey,grey);
  display:block;
  width:350px;
  height:200px;
  border-radius:inherit;
  transform:translateZ(-60px);
}

before pseudo selector will be used to create the below space for the card with a bigger size than the card itself, so that card will look like it is in front of another element like a 3d effect.
translateZ property will push the before element 60px behind the card along the z-axis.

.effect::after{
  top:50%;
  left:50%;
  transform:translateX(-40%) translateY(-45%) translateZ(-59px);
  filter:blur(10px);
  background-color:rgb(0,0,0,0.7);
  display:block;
  width:250px;
  height:170px;
  border-radius:inherit;
}

after pseudo selector will be used to create the shadow effect for the card. Filter property will blur the shadow.
The size of this element is a little bit larger than the card.
translateZ here is 1px smaller than the before pseudo-element so this shadow will lie between the background element and Card element.