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

 

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/209138.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开发问题记录

开发问题记录&#x1f4dd; vant组件开发相关问题 vant开发的组件库初次渲染没问题,只要跳转至其他页面再进来设置的label-align属性就会丢失不生效 原因: 进入其他页面加载了主项目的vant库的css优先级层级高,然后就把组件本身的样式覆盖了, ​​​​ 解决思路: 使用渗透把主…

兼容jlink OB arm仿真器使用(杜邦线过长导致烧写总是失败)

一、兼容jlink OB的使用&#xff1a; 1、设置中要选择jlink&#xff1b; 2、模式选择SWD模式&#xff08;接三根线&#xff09;&#xff1b; 二、杜邦线过长导致stm32的stlink烧写总是失败 用ST-link烧写提示的错误信息有&#xff1a; Error while accessing a target reso…

蓝桥杯day03——Bigram 分词

1.题目 给出第一个词 first 和第二个词 second&#xff0c;考虑在某些文本 text 中可能以 "first second third" 形式出现的情况&#xff0c;其中 second 紧随 first 出现&#xff0c;third 紧随 second 出现。 对于每种这样的情况&#xff0c;将第三个词 "th…

argparse.ArgumentParser() 用法解析cmd命令行选项、参数

一、简介 1、argparse 是一个 Python 模块&#xff1a;命令行选项、参数和子命令解析器。 2、argparse 模块可以让人轻松编写用户友好的命令行接口。程序定义它需要的参数&#xff0c;然后 argparse 将弄清如何从 sys.argv 解析出那些参数。 argparse 模块还会自动生成帮助和…

三相交流电子负载的应用

三相交流电子负载可以模拟各种类型的负载&#xff0c;如电阻、电感、电容等&#xff0c;三相交流电子负载广泛应用于电力系统、工业自动化、新能源等领域&#xff0c;具有很高的实用价值。 在电力系统中&#xff0c;三相交流电子负载可以用于测试和调试电力设备。例如&#xff…

java原子类型

AtomicBoolean AtomicInteger AtomicLong AtomicReference<V> StringBuilder - 不是原子类型。StringBuilder 是 java.lang 包下的类 用法&#xff1a;无需回调改变数值

stm32项目中重定向printf打印不出来东西?三种解决方案

项目场景&#xff1a; 在stm32项目中为了调试将某些参数打出来&#xff0c;重定向printf 问题描述 printf打印不出东西 缓冲区满了才打印出来 原因分析&#xff1a; 使用printf函数必须等到缓冲区满或程序结束时&#xff0c;才进行写入到屏幕 解决方案&#xff1a; 解决方…

基于若依的ruoyi-nbcio流程管理系统仿钉钉流程初步完成转bpmn设计(还有bug,以后再修改)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 今天初步完成仿钉钉流程转bpmn设计的工作&#xff0c;当然还有不少bug&#xff0c;以后有需要或者网友也帮…

geoserver 发布图层(tif、shp等)

我们用得最多的是这个板块的内容 下面我们来尝试发布地图。点击【数据】——【工作区】——【添加新的工作区】&#xff0c;工作区可以理解为是用来存放发布地图的一个集合。 在【新建工作区】中输入名称&#xff0c;还有一个命名空间URI&#xff0c;这个只要保持和之前的工作区…

Elementplus遇到的问题

问题1&#xff1a; el-upload 手动上传图片&#xff0c;&#xff0c;上传之后&#xff0c;&#xff0c;el-upload 中插槽的图片无法显示&#xff0c;&#xff0c;&#xff0c;官网也是无法显示 手动上传图片&#xff0c;&#xff0c;&#xff0c;返回图片的url&#xff0c;&…

Unity中Shader指令优化(编译后指令解析)

文章目录 前言一、我们先创建一个简单的Shader二、编译这个Shader&#xff0c;并且打开1、编译后注意事项2、编译平台 和 编译指令数3、顶点着色器用到的信息4、顶点着色器计算的核心部分5、片元着色器用到的信息6、片元着色器核心部分 前言 我们先读懂Shader编译后代码&#…

加强网站稳定性!学习如何进行高效压力测试!

前言 1、什么是压力测试&#xff1f; 软件压力测试是一种基本的质量保证行为&#xff0c;它是每个重要软件测试工作的一部分。 软件压力测试的基本思路很简单&#xff1a;不是在常规条件下运行手动或自动测试&#xff0c;而是在计算机数量较少或系统资源匮乏的条件下运行测试…

红队攻防实战之某商城Getshell

此后如竟没有炬火&#xff0c;我便是唯一的光 信息收集 端口扫描 nmap -T4 -A -p 1-65535 可以看到目标系统开放22、80、888、3306、8800端口 敏感文件扫描 http:///admin/login.html 后台登陆地址泄露 漏洞挖掘 phpinfo信息泄露 phpinfo信息泄露&#xff0c;此站为Linu…

如何使用windows Terminal终端连接远程Linux服务器

近接触到了zsh这个shell&#xff0c;所以在ubuntu系统上反复折腾&#xff0c;终于在ubuntu-desktop系统上使用oh-my-zsh和powerlevel10k配置好了一个比较好看的终端&#xff08;个人认为挺好看&#xff0c;勿喷&#xff09;。 但是在从windwos的Mobaxterm登录ubuntu查看时&…

MySQL字符函数

在数据库中&#xff0c;字符函数是一组用于处理字符串的函数。这些函数可以帮助我们执行各种操作&#xff0c;如连接、比较、替换等。本文将介绍一些常用的MySQL字符函数&#xff0c;并演示如何在查询中使用它们。 1.concat() 函数 CONCAT() 函数用于连接两个或多个字符串。它…

Unity UGUI控件之Horizontal Layout Group

Horizontal Layout Group是Unity中的UGUI控件&#xff0c;用于在水平方向上对子对象进行布局。 主要有一下作用&#xff1a; 水平布局&#xff1a;Horizontal Layout Group将子对象按照水平方向进行布局&#xff0c;可以控制子对象的排列顺序和间距。自动调整尺寸&#xff1a…

Linux环境下ARM开发

目录 前言ARM启动及开发基础1.Cortex-A架构2.启动方式3.汇编基础4.Makefile语法基础5.Makefile补充6.编译下载 结语 前言 主要介绍基于linux开发环境下&#xff0c;如何开发ARM A7 ARM启动及开发基础 1.Cortex-A架构 1&#xff09;Cortex-A7运行模式 模式说明User(USR)用户模…

WSL2+tensorflow-gpu 2.3.0 C++ 源码编译

wsl2已有gcc 版本为9.4.0&#xff0c;但tensorflow2.3.0需对应gcc7.3.1 tensorflow与cuda cudnn python bazel gcc版本对应关系 故需下载一个低版本的gcc&#xff0c;但同时还想保留较高版本的gcc&#xff0c;那么参考文章&#xff1a;深度学习环境搭建(二): Ubuntu不同版本g…

springboot数据格式验证——自定义日期格式验证及list验证

我们在工作中经常需要对日期格式进行定义&#xff0c;如果客户端传来的日期字符串不符合要求&#xff0c;那么根本无法保存&#xff0c;但是已有的注解并没有日期格式的验证&#xff0c;那我们就自己实现一个 一、自定义日期格式验证的注解DateFormat import javax.validatio…

SpringBoot结合easyexcel处理Excel文件

原创/朱季谦 假如有这样一个需求&#xff0c;每天需要读取以下表头的Excel文件&#xff0c;统计文件里击中黑名单的比例&#xff0c;该文件is_blacklist列的1表示击中了黑名单&#xff0c;0表示未击中黑名单。 基于该需求&#xff0c;可以在定时任务通过easyexcel工具进行处理…