DEV Community

Cover image for 3D Card Effect - HTML/CSS
Shubham Tiwari
Shubham Tiwari

Posted on

3D Card Effect - HTML/CSS

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>
Enter fullscreen mode Exit fullscreen mode
  • 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)
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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.

I hope you will get the logic and if not, you can follow the kevin powell tutorial. The link is attached at the top of this blog

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you๐Ÿ‘‡๐Ÿ‘‡ ^^
โ˜• --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/website-components-you-should-know-25nm

https://dev.to/shubhamtiwari909/smooth-scrolling-with-js-n56

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/custom-tabs-with-sass-and-javascript-4dej

Top comments (1)

Collapse
 
vulcanwm profile image
Medea

nice!