Using CSS Perspective To Create a 3D Card Tilt Animation In Minutes
You don't need any fancy libraries to work with 3D in CSS!
... Almost ready!
3D in CSS without a fancy library!
There are many libraries out there to create 3D animations. With CSS perspective though, you don't need to use any of them, and can still create some pretty cool effects. In this article we'll explore how to use CSS perspective to effortlessly create a 3D card tilt animation.
It all starts with perspective – what is it?
The magic property that unlocks the 3D potential, is
perspective. This property determines the distance between the 0 z-index, and the user. Defining this perspective is done in pixels, meaning that if you define
perspective: 800px, you define a distance of 800 pixels between the user and z-index 0.
As an example, take a look at the below image. It shows the same card twice, once with a perspective of 800 pixels, and the second time with a perspective of 10 pixels. It results in a very different effect.
Rotating the card in 3D space
Adding only perspective, won't rotate the card yet. It does give the default CSS rotate additional strengths though. Play around with the different rotations in the example below, to see the effect it has.
That's all there's to it