拖动3D立方体-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72923430/article/details/134315757
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动3D立方体</title>
    <style>
        .box {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cube {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-10deg) rotateY(-10deg);
        }

        .face {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgba(255, 255, 255, 0.5);
            border: 1px solid #000000;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-user-select: none;
            /* Safari */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE10+/Edge */
            user-select: none;
            /* Standard */
        }

        .front {
            transform: translateZ(100px);
        }

        .back {
            transform: rotateY(180deg) translateZ(100px);
        }

        .left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="cube">
            <div class="face front">111</div>
            <div class="face back">222</div>
            <div class="face left">333</div>
            <div class="face right">444</div>
            <div class="face top">555</div>
            <div class="face bottom">666</div>
        </div>
    </div>
    <script>
        const box = document.querySelector('.box');
        const cube = document.querySelector('.cube');
        let mouseDownX, mouseDownY, mouseMoveX, mouseMoveY, rotationX = 0, rotationY = 0;
        function onMouseDown(event) {
            mouseDownX = event.clientX;
            mouseDownY = event.clientY;
        }
        function onMouseMove(event) {
            if (mouseDownX > 0) {
                mouseMoveX = event.clientX;
                mouseMoveY = event.clientY;
                const deltaX = mouseMoveX - mouseDownX;
                const deltaY = mouseMoveY - mouseDownY;
                mouseDownX = event.clientX;
                mouseDownY = event.clientY;
                rotationX += (deltaX / 5);
                rotationY += (deltaY / 5);
                cube.style.transform = `rotateX(${0 - rotationY}deg) rotateY(${rotationX}deg)`;
            }
        }
        function onMouseUp() {
            mouseDownX = 0
        }
        box.addEventListener('mousedown', onMouseDown);
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    </script>
</body>

</html>