立体照片旋转-阿里云开发者社区

立体照片旋转

2022-10-31 75

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 旋转照片+开关灯


<style>
        body {
            perspective: 2500px;
            background-color: #000000;
        }

        .open {
            background-color: aliceblue;
        }

        .close {
            background-color: #000000;
        }

        .box {
            position: relative;
            width: 300px;
            height: 400px;
            margin: 150px auto;
            transform-style: preserve-3d;
            transition: all 6s;
            animation: rot 10s linear infinite;
        }

        .box:hover {
            animation-play-state: paused;
        }

        @keyframes rot {
            0% {
                transform: rotateY(0);
            }

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

        .box div {
            position: absolute;
            border-radius: 10px;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        div div:nth-child(1) {
            transform: rotateY(0) translateZ(500px);
            background: url(./img/日本和服女.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(2) {
            transform: rotateY(60deg) translateZ(500px);
            background: url(./img/迪迦.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(3) {
            transform: rotateY(120deg) translateZ(500px);
            background: url(./img/梦想的草原.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
            background: url(./img/脸上长花的女生.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(5) {
            transform: rotateY(240deg) translateZ(500px);
            background: url(./img/迪迦.jpg) no-repeat;
            background-size: cover;
        }

        div div:nth-child(6) {
            transform: rotateY(300deg) translateZ(500px);
            background: url(./img/梦想的草原.jpg) no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <button class="btn">开/关灯</button>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var btn = document.querySelector('button');
        var flag = 1;
        // 获取body
        var bodys = document.body;
        // 点击事件
        btn.addEventListener('click', function () {
            if (flag == 0) {
                bodys.className = 'close';
                flag = 1;
            } else {
                bodys.className = 'open';
                flag = 0;
            }
        })
    </script>
</body>

立体照片旋转

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

立体照片旋转

热门文章

最新文章

相关电子书