Build a 3D Bank Card with Vanilla-tilt.js

Make your cards stand-out with this quick JavaScript tutorial

What we are going to build

THE PROBLEM

The payment form on our website looks a little bit dull. Customers get bored and don’t input their card details. How can we make it more engaging?

See our boring static card.

A SOLUTION

We are going to use Vanilla-tilt.js to make our card move in 3 dimensions when hovering it with our mouse or tilting our handheld device.

It is really simple:

1. Import it in our project

npm install vanilla-tilt

or import it from a CDN as in the example:

import vanillaTilt from "https://cdn.skypack.dev/[email protected]";

2. Target a DOM element as a Vanilla-tilt container. The second argument is the options object.

const card = document.querySelector("#card");
VanillaTilt.init(card, { max: 10, speed: 1000, perspective: 700 });

And that’s really it! Here is our final result:

Our cool cat 3D moving card! Let’s spend all our $$!

Get notified of new blog posts?

RSS is the correct choice, btw.