【无标题】

最新推荐文章于 2024-09-11 15:33:18 发布

小外外

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量60

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/cwzxl/article/details/130842834

版权

立方体的旋转和控制

手写立方体的旋转和控制，做到cv复用

<!--
 * @Author: 曹曙光
 * @Date: 2023-05-23 16:06:58
 * @LastEditors: 曹曙光
 * @LastEditTime: 2023-05-24 10:56:43
 * @FilePath: \newBigscreen\立体旋转.html
 * @Description: 
 * 
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            user-select: none;
        }

        .center {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 200px auto;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateY(30deg) rotate(13deg);

        }

        .move {
            animation: move 10s linear infinite;
            animation-play-state: running;
        }

        @keyframes move {
            0% {
                transform: rotateY(0deg) rotate(0deg);
            }

            100% {
                transform: rotateY(360deg) rotate(360deg);
            }
        }

        .one {
            width: 200px;
            height: 200px;
            background-color: rgba(240, 255, 240, 0.57);
            position: absolute;
            transform: translateZ(-100px);
            text-align: center;
            line-height: 100px;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 217, 0, 0.519);
            position: absolute;
            transform: translateZ(-100px)translateY(-100px) translateZ(100px) rotateX(90deg);
            text-align: center;
            line-height: 100px;

        }

        .three {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 255, 0.527);
            position: absolute;
            transform: translateZ(-100px)translateY(100px) translateZ(100px) rotateX(90deg);
            text-align: center;
            line-height: 100px;

        }

        .four {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, 0.584);
            position: absolute;
            transform: translateZ(100px);
            text-align: center;
            line-height: 100px;

        }

        .five {
            width: 200px;
            height: 200px;
            background-color: rgba(103, 93, 188, 0.639);
            position: absolute;
            transform: translateZ(0px) translateX(100px) rotateY(90deg);
            text-align: center;
            line-height: 100px;

        }

        .six {
            width: 200px;
            height: 200px;
            background-color: rgba(188, 93, 123, 0.639);
            position: absolute;
            transform: translateZ(0px) translateX(-104px) rotateY(-90deg);
            text-align: center;
            line-height: 100px;

        }
    </style>
</head>

<body>
    <div class="center move">
        <div class="one">第一个</div>
        <div class="two">第二个</div>
        <div class="three">第三个</div>
        <div class="four">第四个</div>
        <div class="five">第五个</div>
        <div class="six">第六个</div>
    </div>

    <script>
        // -需求为 跟随鼠标的移动进行旋转
        // -其中移除事件 removeEventListen 方法必须一致 尽量提取出来使用箭头函数
        var rotatX, rotatY
        let doc = document.querySelector('.center')
        doc.addEventListener('mousedown', function (e) {
            window.document.addEventListener("mousemove", getWay)
        })
        window.document.addEventListener("mouseup", function (e) {
            window.document.removeEventListener("mousemove", getWay)
            doc.classList.add('move')
        })
        getWay = (e) => {
            rotatX = e.clientX
            rotateY = e.clientY
            doc.classList.remove('move')
            doc.style = `transform:rotateX(${rotatX}deg) rotateY(${rotateY}deg) rotateZ(${rotateY}deg)`
        }
    </script>
</body>

</html>