DEV Community

loading...
Cover image for ✨ 3D Card Hover Effect With Modern CSS Properties 😍

✨ 3D Card Hover Effect With Modern CSS Properties 😍

satishnaikawadi2001 profile image Satish Naikawadi Originally published at satishnaikawadi.me ・5 min read

In this post , we are going to create very πŸ’– beautiful and unique 3D card hover effect with HTML and CSS. We will use some modern properties in CSS to achieve this effect. Below is the demo of what we will create in this post -
3d-card-gif.gif

We will proceed as below:

  1. Creating a HTML Markup.
  2. Adding Basic Styling For All Elements.
  3. Creating Actual Hover Effect.

So lets first add all the HTML code to build required structure.

🚧 Creating HTML Markup

<body>
        <h1 class="heading">3D Card Hover Effect</h1>
        <div class="container">
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NXx8bmF0dXJlfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="Green Forests">
                    <div class="card__content">
                        <h1 class="card__header">Green Forests</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravidas</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1505245208761-ba872912fac0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzd8fG5hdHVyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                        alt="Beutiful Oceans">
                    <div class="card__content">
                        <h1 class="card__header">Beautiful Oceans</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravida</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="card"><img class="card__img"
                        src="https://images.unsplash.com/photo-1431512284068-4c4002298068?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OTB8fG5hdHVyZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60s"
                        alt="Snowy Mountains">
                    <div class="card__content">
                        <h1 class="card__header">Snowy Mountains</h1>
                        <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id sem sit
                            amet massa aliquet aliquet. Phasellus at ipsum
                            congue urna commodo gravida</p><button class="card__btn">Explore
                            <span>&rarr;</span></button>
                    </div>
                </div>
            </div>
        </div>
    </body>

Enter fullscreen mode Exit fullscreen mode

Here we have div with class 'container' which will be the parent of all the three cards. Then we are having each 'card' inside div with class
'item'. Each 'card' div has its image,its header and some text related to it. It also has one button inside it.
So that's the basic HTML markup of the webpage we are going to build.
Now lets see add some styling for all the elements like 'card',img,text inside card, button and also some styling for layouting of card.

πŸ¦‹Basic Styling For All Elements

Below is the CSS code for styling of these elemets -

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
body {
    padding: 6rem;
    background-color: #15202b;
    color: white;
    font-family: "Inter", sans-serif;
}

.heading {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 3rem;
    text-shadow: 3px 4px 5px pink;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.item {
    background-color: #192734;
    border-radius: 0.4rem;
    overflow: hidden;
    cursor: pointer;
    width: 30%;
    transition: .5s all ease;
    box-shadow: 0px 20px 50px #555;
}
.card__img {
    display: block;
    width: 100%;
    height: 18rem;
    object-fit: cover;
}
.card__content {
    padding: 3rem 3rem;
}
.card__header {
    font-size: 3rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1.5rem;
}
.card__text {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    line-height: 1.7;
    color: #8899a6;
    margin-bottom: 2.5rem;
}
.card__btn {
    display: block;
    width: 100%;
    padding: 1.5rem;
    font-size: 2rem;
    text-align: center;
    color: #3363ff;
    background-color: #e6ecff;
    border: none;
    border-radius: 0.4rem;
    transition: 0.2s;
    cursor: pointer;
}
.card__btn span {
    margin-left: 1rem;
    transition: 0.2s;
}
.card__btn:hover,
.card__btn:active {
    background-color: #dce4ff;
}
.card__btn:hover span,
.card__btn:active span {
    margin-left: 1.5rem;
}

@media (max-width: 992px) {
    .item {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .item {
        width: 80%;
    }
}


Enter fullscreen mode Exit fullscreen mode

So this is the all basic styling needed to style our webpage. After this we will now see how we can create the actual 3D Card Hover Effect
with some interesting CSS properties.

πŸ˜‰ Creating Actual 3D Hover Effect

Firstly , for giving starting position to our cards , we will add transform property to it which will have value as rotateX(45deg) scale(0.7). Now here

  • rotateX() - The rotateX() method rotates an element around its X-axis at a given degree in 3 dimensions.
  • scale() - The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). these methods will make our item to be rotated along X-axis with 45 degrees with its size decreased to 0.7 of its original size.
transform: rotateX(45deg) scale(0.7);
Enter fullscreen mode Exit fullscreen mode

Now by adding this line we won't get our initial positions of our card , instead we will get it as below -
unwanted.jpg
from which it looks like item is scaled down to 0.7 of its original size but it doesn't look like it has rotated through 45 degrees around X-axis. But it did. It doesn't look like rotated because while doing 3D transformation we have tell browser that how far is that item from the user's eyes. And to do that we can use perspective property in CSS.

🧐Perspective In CSS

1.The perspective property is used to give a 3D-positioned element some perspective.
2.The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.
3.When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.
To learn more about perspective in CSS and other properties related to it like perspective-origin Click Here

So now to get desired positioning of our items , we will add perspective property to container which is a parent of item components and set its value to 900px(While using perspective you should try and test values to get desired look).

.container {
    perspective: 900px;
}
Enter fullscreen mode Exit fullscreen mode

So now we will get correct initial look for our cards which is as below -
desired.jpg
So that's hard part done. Now we only have to add hover state to our item which will be its normal position for which we will set transform property as rotate(0deg) scale(1).

.item:hover {
    cursor: pointer;
    transform: rotate(0deg) scale(1);
    transition: .5s all ease;
    z-index: 400;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.16);
}
Enter fullscreen mode Exit fullscreen mode

And with that we have completed our beautiful and awesome 3D Hover Effect. I know perspective property is little difficult to understand. But with practicing more examples and reading docs you will get comfortable with it.
For more articles related to programming do visit my
Personal Blog.
I Hope this will help you guys. Thanks πŸ˜‡ for reading as always.

Discussion (5)

pic
Editor guide
Collapse
akashshyam profile image
Akash Shyam

Please share a codepen for this! Apart from that, nice animation!

Collapse
the_riz profile image
Rich Winter

Dropped it in codepen. See codepen.io/r-i-c-h/pen/GRrwPXQ Layout doesn't really work out very because the spacing is dependent on the full size cards...

Collapse
zippytyro profile image
Shashwat Verma

wow, super cool

Collapse
devfranpr profile image
DevFranPR • Edited

It looks like the animation from a Yu-gi-oh! videogame. Pretty cool

Collapse
adaendra profile image
Maxime Guilbert

So much memories