js实现鼠标跟随 3D 旋转动效

最新推荐文章于 2024-05-17 13:52:13 发布

石大漂亮

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量392

点赞数

文章标签： javascript 3d css

本文链接：https://blog.csdn.net/qq_45457134/article/details/132164375

版权

js实现鼠标跟随 3D 旋转动效

<div id="element"></div>

body {
        width: 100vw;
        height: 100vh;
        display: flex;
        transform-style: preserve-3d;
        perspective: 500px;
        cursor: pointer;
    }

    div {
        margin: auto;
        width: 200px;
        height: 200px;
        background: #000;
        transform-style: preserve-3d;
        transition: all .1s;
    }

const multiple = 10;
    const mouseOverContainer = document.getElementsByTagName("body")[0];
    const element = document.getElementById("element");

    function transformElement(x, y) {
    let box = element.getBoundingClientRect();
    let calcX = -(y - box.y - (box.height / 2)) / multiple;
    let calcY = (x - box.x - (box.width / 2)) / multiple;
    
    element.style.transform  = "rotateX("+ calcX +"deg) "
                            + "rotateY("+ calcY +"deg)";
    }

    mouseOverContainer.addEventListener('mousemove', (e) => {
    window.requestAnimationFrame(function(){
        transformElement(e.clientX, e.clientY);
    });
    });

    mouseOverContainer.addEventListener('mouseleave', (e) => {
    window.requestAnimationFrame(function(){
        element.style.transform = "rotateX(0) rotateY(0)";
    });
    });