旋转立方体.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>
相关推荐
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css
珹洺2 小时前
Java-Spring入门指南(二十四)SSM整合HTML:解决CSS/JS静态资源被过滤问题
java·spring·html
CodeCraft Studio3 小时前
Excel处理控件Aspose.Cells教程:使用 Python 将 HTML 转换为 Excel
python·html·excel·aspose·aspose.cells·html转excel
starxg4 小时前
bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
java·pdf·html·wkhtmltopdf·htmltopdf
华仔啊5 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
一只小风华~5 小时前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html
Never_Satisfied6 小时前
在JavaScript / HTML中,所有转义字符(字符实体)
html·转义字符·字符实体
深蓝电商API1 天前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
Python私教1 天前
React 19 如何优雅整合 Ant Design v5 与 Tailwind CSS v4
前端·css·react.js
汤姆Tom1 天前
写这么多年CSS,都不知道什么是容器查询?
前端·css·面试