3D Perspective Card using JavaScript - Coding Torque

byPiyush Patil -August 29, 2022

0

3D Perspective Card using JavaScript

Hello Guys! In this blog, We are going to make a card with a 3D perspective using javascript. We can use this type of effect on the payment page for showcasing the credit/debit details card. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover the HTML part

Here is the Final HTML Code

<!doctype html>
<html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>3D Perspective using Tilt.js - @code.scientist x @codingtorque</title>
    </head>
    
    <body>
        <div class="container">
            <div class="card"></div>
        </div>
    </body>
    
</html>

No Output Here...

Let's understand CSS Part

In the below CSS code,

We declare a * selectors to set the font Poppins that we have imported in our head tag.
Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
Next we have a card with a background image, border radius for curved borders, height-width, and flex properties.

* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 15rem;
}

.container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.card {
    background: url('../imgs/one.jpg') center center / cover;
    border-radius: 10px;
    height: 20rem;
    width: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: -1;
    cursor: pointer;
    transition: 0.3s;
}

.card:hover {
    transform: scale(1.1);
}

Output Till Now

Finally a JavaScript Part

In the below javascript code, we have an event listener which grabs the position of mouse pointer and rotate the card accordingly.

const box = document.querySelector(".container");
const boxRect = box.getBoundingClientRect();

box.addEventListener('mousemove', e => {
    const xPosition = (e.clientX - boxRect.left) / boxRect.width
    const yPosition = (e.clientY - boxRect.top) / boxRect.height - 0.6
    const xOffset = -(xPosition - 0.6)
    const dxNorm = Math.min(Math.max(xOffset, -0.6), 0.6)
    box.style.transform = `perspective(1000px)
                            rotateY(${dxNorm * 45}deg)
                            rotateX(${yPosition * 45}deg)`
})

box.addEventListener('mouseleave', e => {
    box.style.transform = 'none'
})

If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

If you have any doubt or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Written by: Coding Torque | Piyush Patil

Follow us on Instagram for more projects like this👨‍💻

- @code.scientist

- @codingtorque

- @codingknights