How to Create Stunning 3D Hover Effect with TailwindCSS

Have you ever been mesmerized by those stunning 3D parallax hover effects on cards? They look complex, right? Well, I thought so too, until I came across a simple CodePen demo that showed how easy it is to create one. Do you want to learn it too? Let’s dive in-

Some basics

To achieve the 3D effect, we need to know couple of things first. Those are-

• Perspective: The perspective property controls how far the object appears from the viewer. A lower value creates a stronger, more dramatic 3D effect, while a higher value makes the effect more subtle.

• Transform: The transform property lets you apply 2D or 3D changes to an element. You can use it to rotate, scale, move, skew, and more!

Let’s jump to code

Check the final result first, so you will understand what we are trying to build. Hover over the card and see how it looks?

Now, let’s see how it works. I won’t explain every TailwindCSS class here. We will just discuss about the main classes which are doing the effect. First, let’s see the main card’s div’s classes-

<div class="cursor-pointer [transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)] w-96 sm:w-84 p-5 bg-violet-300 rounded-lg shadow-lg group duration-300">

Look at this part here-

[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

We are doing two things here. At first, we are rotating the card by its Y axis by 10 degrees. And, also setting the perspective to 800px. As a result, the normal state of the card looks like the image below. It is slightly rotated to the right. And, as we have applied some perspective, you can see that the right side of the card is bit skewed. That’s how real 3D world works!

We can tweak the perspective to see the changes in the card. And, you will also get an idea how the perspective works-

This is how it looks if we change the perspective to 100px. The more we lower the perspective value, the more closer the content is - remember?

And, this is what we get if we set the perspective to 10000px. It is so far that it seems like there’s no rotation at all!

Now, we will see how it is having a 3D illusion when we hover it. And, you will be surprised to see that it’s so easy to fool our eye!

See this part of the code of the img-

<img class="duration-300 group-hover:-translate-x-8" .../>

When hovering over the card, the image slides 2.5rem to the left, creating a dynamic effect. For this, we are using Group modifer of TailwindCSS. And, that’s it! We will have a 3D image rotating card.

Now it’s your turn! Experiment with these classes, tweak the perspective, or combine this effect with other TailwindCSS utilities to create something unique. Don’t forget to share your creations in the comments or on social media!