渡一教育公开课web前端开发JavaScript精英课学习笔记（三十二）JavaScript旋转方块

最新推荐文章于 2023-09-24 00:59:38 发布

じоνё靁〃

最新推荐文章于 2023-09-24 00:59:38 发布

阅读量3.4k

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/89062392

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 10 订阅

订阅专栏

JavaScript旋转方块

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转立方体</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body,
        html {
            background-color: #080808;
            color: #fff;
            text-align: center;
        }

        .container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto 60px;
            perspective: 1000px;
        }

        .container .cube {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            /* transform: rotate3d(-1,1,1,30deg); */
            /* transition:all 1s; */
            transform: translateZ(-150px);
            transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .container .cube li {
            position: absolute;
            width: 100%;
            height: 100%;
            /* background-color: red; */
            border: 1px solid #fff;
        }

        /* 前 */
        .container .cube .img1 {
            transform: translateZ(150px);
        }

        /* 后 */
        .container .cube .img2 {
            transform: translateZ(-150px) rotateY(180deg);
        }

        /* 左 */
        .container .cube .img3 {
            transform: translateX(-150px) rotateY(-90deg);
        }

        /* 右 */
        .container .cube .img4 {
            transform: translateX(150px) rotateY(90deg);
        }

        /* 上 */
        .container .cube .img5 {
            transform: translateY(-150px) rotateX(90deg);
        }

        /* 下 */
        .container .cube .img6 {
            transform: translateY(150px) rotateX(-90deg);
        }

        .container .cube li img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto auto;
        }

        .container .cube.init {
            transform: translateZ(-150px) rotateX(-15deg) rotateY(30deg);
        }

        .container .cube.show-image-1 {
            transform: translateZ(-150px) rotateY(0deg)
        }

        .container .cube.show-image-2 {
            transform: translateZ(-150px) rotateY(180deg)
        }

        .container .cube.show-image-3 {
            transform: translateZ(-150px) rotateY(90deg)
        }

        .container .cube.show-image-4 {
            transform: translateZ(-150px) rotateY(-90deg)
        }

        .container .cube.show-image-5 {
            transform: translateZ(-150px) rotateX(-90deg)
        }

        .container .cube.show-image-6 {
            transform: translateZ(-150px) rotateX(90deg)
        }

        .btnList {
            margin: 50px auto;
            width: 200px;
            height: 150px;
            display: grid;
            grid-template-columns: 50px 50px 50px;
            grid-template-rows: 50px 50px;
            justify-content: center;
            grid-gap: 15px;
        }

        .btnList li input {
            width: 50px;
            height: 50px;
            outline: none;
            border: 2px solid #fff;
            transition: all 0.3s;
            border-radius: 5px;
            color: #fff;

        }

        .btnList li input:hover {
            transform: scale(1.2);
        }

        .btnList li input:focus {
            border-color: orangered;
        }
        h1{
            margin-top:50px;
        }
    </style>
</head>

<body>
    <h1>旋转立方体</h1>
    <div class="container">
        <ul class="cube init">
            <li class='img1'><img src="./img/monika01.jpg" alt="前 - 壹"></li>
            <li class='img2'><img src="./img/monika02.jpg" alt="后 - 贰"></li>
            <li class='img3'><img src="./img/monika03.jpg" alt="左 - 叁"></li>
            <li class='img4'><img src="./img/monika04.jpg" alt="右 - 肆"></li>
            <li class='img5'><img src="./img/monika05.jpg" alt="上 - 伍"></li>
            <li class='img6'><img src="./img/monika06.jpg" alt="下 - 陆"></li>
        </ul>
    </div>
    <h2>请点击下列图片方块</h2>
    <ul class="btnList">
        <li><input type="image" alt='壹' src='./img/monika01.jpg' data-rotatex='0' data-rotatey='0' data-rotatez='0'
                data-class-name='show-image-1' class='show-image-1'></li>
        <li><input type="image" alt='贰' src='./img/monika02.jpg' data-rotatex='0' data-rotatey='180' data-rotatez='0'
                data-class-name='show-image-2' class='show-image-2'></li>
        <li><input type="image" alt='叁' src='./img/monika03.jpg' data-rotatex='0' data-rotatey='90' data-rotatez='0'
                data-class-name='show-image-3' class='show-image-3'></li>
        <li><input type="image" alt='肆' src='./img/monika04.jpg' data-rotatex='0' data-rotatey='-90' data-rotatez='0'
                data-class-name='show-image-4' class='show-image-4'></li>
        <li><input type="image" alt='伍' src='./img/monika05.jpg' data-rotatex='-90' data-rotatey='0' data-rotatez='0'
                data-class-name='show-image-5' class='show-image-5'></li>
        <li><input type="image" alt='陆' src='./img/monika06.jpg' data-rotatex='90' data-rotatey='0' data-rotatez='0'
                data-class-name='show-image-6' class='show-image-6'></li>
    </ul>
</body>
<script>
    (function () {
        let cube = document.getElementsByClassName('cube')[0];
        let inputs = document.getElementsByTagName('input');
        let classList = cube.classList;
        let curClass = classList[1];

        for (let i = 0; i < inputs.length; i++) {
            //讲师的方法
            // inputs[i].addEventListener('click', clickFn);
            //使用自定义属性
            inputs[i].addEventListener('click', clickFnn);
        }
        function clickFn(e) {
            let targetClass = e.target.className;
            // let targetClass = this.dataset.className;
            if (targetClass != curClass) {
                classList.replace(curClass, targetClass);
                curClass = targetClass;
            }
        }
        function clickFnn(e) {
            let curx = parseInt(this.dataset.rotatex),
                cury = parseInt(this.dataset.rotatey),
                curz = parseInt(this.dataset.rotatez);
            cube.style.transform = 'translateZ(-150px) rotateX(' + (curx) + 'deg) rotateY(' + (cury) + 'deg) rotateZ(' + (curz) + 'deg)';
        }
    })()



</script>

</html>

じоνё靁〃

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
渡一教育公开课web前端开发JavaScript精英课学习笔记（三十二）JavaScript旋转方块

JavaScript旋转方块<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫