class="effect">
  This is a 3d Card

• 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.

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