js实现dom拖拽3D变化效果

最新推荐文章于 2025-05-24 15:24:14 发布

冬天不会冷ll

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量303

点赞数

文章标签： javascript 3d 前端

本文链接：https://blog.youkuaiyun.com/weixin_48567214/article/details/129009367

版权

该代码示例展示了如何使用HTML、CSS和JavaScript创建一个可拖动旋转的粉色方块。当鼠标按下时，方块开始根据鼠标移动的角度进行3D旋转，鼠标抬起时停止旋转。主要涉及的技术包括CSS的transform-style和transition属性，以及JavaScript事件监听和坐标计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform-style: preserve-3d;
            /*不让鼠标选中文字*/
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            translate: 100px 100px;
        }
    </style>
</head>

<body>
    <div class='box1'>测试div</div>
    <script>
        var div = document.getElementsByClassName("box1")[0]
        console.dir(div)
        var oldX = 0
        var oldY = 0
        // 角度初始化
        var RotateY = 0;
        var RotateX = 0;
        var flag = false

        div.onmousedown = evt => {
            // 旧位置
            oldX = evt.pageX
            oldY = evt.pageY
            flag = true
            // 鼠标移动事件
            document.addEventListener("mousemove", e => {
                if (flag) {
                    var x = e.pageX - oldX
                    var y = e.pageY - oldY
                    RotateY += x / 70;
                    RotateX += -(y / 70);
                    div.style.transition = 'linear'
                    div.style.transform = 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'
                }
            })

        }
        // 鼠标谈起事件
        document.onmouseup = e => {
            flag = false
            console.log("弹起");
        }

    </script>
</body>

</html>