3D Tilt Effect Tutorial: HTML, CSS, JS

The 3D Tilt effect is an interactive animation that gives the illusion of depth when a user moves the cursor over an element. This effect is widely used in modern UI design for cards, buttons, or other elements to make them look more dynamic and engaging.

In this article, we will create a 3D Tilt Effect using HTML, CSS, and JavaScript without any additional libraries.

When the user moves the cursor over the element, it tilts in real-time, following the cursor's movement. This effect enhances user experience by adding an interactive and visually appealing touch.

📜 Full Code

🟢 index.html (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Tilt Effect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="tilt-container">
        <div class="card">
            <h2>3D Tilt Effect</h2>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

🔵 styles.css (CSS)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #111;
    font-family: Arial, sans-serif;
    margin: 0;
}

.tilt-container {
    perspective: 1000px;
}

.card {
    width: 300px;
    height: 200px;
    background: linear-gradient(135deg, #ff8c00, #ff0080);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    transition: transform 0.1s ease-out;
    box-shadow: 0px 10px 30px rgba(255, 140, 0, 0.3);
}

🟠 script.js (JavaScript)

const card = document.querySelector(".card");

card.addEventListener("mousemove", (e) => {
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;

    const rotateX = y * 20;
    const rotateY = x * -20;

    card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

card.addEventListener("mouseleave", () => {
    card.style.transform = "rotateX(0deg) rotateY(0deg)";
});

📖 Code Explanation

1️⃣ HTML

The main element is div.card, which will receive the tilt effect.
div.tilt-container provides the 3D perspective.

2️⃣ CSS

perspective: 1000px; in .tilt-container creates a depth illusion.
transition: transform 0.1s ease-out; ensures smooth animation.
box-shadow enhances the depth effect.

3️⃣ JavaScript

mousemove detects cursor position relative to the element.
rotateX & rotateY adjust the tilt angle based on cursor movement.
mouseleave resets the element to its original position when the cursor leaves.

🎯 Conclusion

With just HTML, CSS, and JavaScript, we can create an interactive 3D Tilt Effect without additional libraries. This effect can be applied to UI cards, buttons, or other elements to enhance user engagement.

🔥 Try it out and modify it to suit your needs! If you have any questions or suggestions, feel free to leave a comment! 🚀

Creating an Interactive 3D Tilt Effect with HTML, CSS, and JavaScript