Tiltable Card using HTML, CSS & JavaScript | Coding Torque

byPiyush Patil -
0

 



 Tiltable Card using JavaScript

Hello Guys! Welcome to Coding Torque. In this blog we are going to create Tiltable Card using HTML, CSS & JavaScript😍. 

Here is the source code💥

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">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Tiltable Card using javascript - @code.scientist</title>
</head>

<body>
    <div id="tilt">
        <h2>@code.scientist</h2>
    </div>
</body>

</html>

CSS Code

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

#tilt {
    display: block;
    height: 200px;
    width: 300px;
    background-color: grey;
    margin: 0 auto;
    transition: box-shadow 0.1s, transform 0.1s;
    background: linear-gradient(45deg, deepskyblue, deeppink);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript Code

let el = document.getElementById('tilt')

const height = el.clientHeight
const width = el.clientWidth

el.addEventListener('mousemove', handleMove)

function handleMove(e) {

    const xVal = e.layerX
    const yVal = e.layerY

    const yRotation = 20 * ((xVal - width / 2) / width)

    const xRotation = -20 * ((yVal - height / 2) / height)

    const string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)'

    el.style.transform = string
}

el.addEventListener('mouseout', function () {
    el.style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'
})

el.addEventListener('mousedown', function () {
    el.style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'
})

el.addEventListener('mouseup', function () {
    el.style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'
})

If you have any doubt or any project idea feel free to Contact Us
Tags:

Post a Comment

Previous Post Next Post