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.
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)
nice!