旋转立方体.html(网上收集5)

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转立方体</title>
    <style>
        #cube {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 6s infinite linear;
            margin: 100px auto;
        }

        #cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(0, 255, 255, 0.5);
            border: 2px solid #333;
        }

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

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

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

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

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

        #cube .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        @keyframes rotate {
            0% {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
<div id="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="right"></div>
    <div class="left"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>
<script>
    const cube = document.querySelector('#cube');
    let isPaused = false;

    cube.addEventListener('mouseover', () => {
        isPaused = true;
        cube.style.animationPlayState = 'paused';
    });

    cube.addEventListener('mouseout', () => {
        isPaused = false;
        cube.style.animationPlayState = 'running';
    });

    setInterval(() => {
        if (!isPaused) {
            cube.style.animationPlayState = 'running';
        }
    }, 1000);
</script>
</body>
</html>
相关推荐
繁花与尘埃1 小时前
CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)
css·笔记·学习
over6973 小时前
弹性布局完全指南:从文档流到Flexbox实战
css
白兰地空瓶5 小时前
用 CSS3 造一场星际穿越:前端导演的《星球大战》片场手记
css
lh14245734956 小时前
ECSide标签<ec:table>表格对不齐问题处理
css·1024程序员节
加蓓努力我先飞7 小时前
Vue3小兔鲜-(二)
前端·javascript·css·vue3
有点笨的蛋7 小时前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
UIUV7 小时前
《CSS3 星球大战》页面实现笔记:用代码演绎银河史诗
css·html
inx1777 小时前
HTML 敲击乐 PART--2
javascript·css
Tzarevich7 小时前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css
BBB努力学习程序设计7 小时前
CSS复合选择器
前端·html