基于CSS3制作专属可自由旋转的立方体

一、代码区域

1.1 css3代码区域

    <style>* {padding: 0;margin: 0;list-style: none;}/* 1) 定义动画 */@keyframes loop {0% {transform: rotateX(348deg) rotateY(67deg) rotateZ(95deg);}50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100% {transform: rotateX(348deg) rotateY(67deg) rotateZ(95deg);}}ul {/* 父元素 */width: 200px;height: 200px;/* background-color: #ccc; */margin: 200px auto;position: relative;/* 设置成3d容器 */transform-style: preserve-3d;/* 设置角度旋转 *//* transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); */transform: rotateX(348deg) rotateY(67deg) rotateZ(95deg);/* 2) 使用动画 */animation: loop 8s linear infinite;}ul li {width: 200px;height: 200px;position: absolute;top: 0;left: 0;text-align: center;line-height: 200px;font-size: 20px;user-select: none;}ul li:nth-child(1) {background-color: rgba(255, 0, 0, .5);/* 围绕X旋转90° 再位移盒子尺寸的一半 */transform: rotateX(90deg) translateZ(100px);}ul li:nth-child(2) {background-color: rgba(255, 255, 0, .5);transform: rotateX(90deg) translateZ(-100px);}ul li:nth-child(3) {background-color: rgba(255, 0, 255, .5);transform: rotateY(90deg) translateZ(100px);}ul li:nth-child(4) {background-color: rgba(0, 255, 0, .5);transform: rotateY(90deg) translateZ(-100px);}ul li:nth-child(5) {background-color: rgba(0, 0, 255, .5);transform: translateZ(100px);}ul li:nth-child(6) {background-color: rgba(0, 255, 255, .5);transform: translateZ(-100px);}</style>

1.2 html代码区域

    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

二、代码效果展示

三、个人总结:

        该功能的实现主要利用了css3中的动画,过渡属性,转换属性以及类名选择器,其中旋转的参数大家可自行修改,便于更好地理解该功能的实现。

注: 博主每天记录自己所学,如有写的不好之处,希望您能不吝赐教,给我一些关于这个项目的意见和建议。各位的宝贵意见将对我产生深远的影响,我将认真倾听并尽力改进。谢谢各位~~

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读-MIPD:一种用于分布式深度神经网络训练的自适应梯度稀疏化框架

摘要—基于参数服务器架构的异步训练广泛应用于大规模数据集和深度神经网络模型的扩展训练。在大规模分布式深度学习系统中&#xff0c;通信一直被认为是主要瓶颈。最近的研究尝试通过梯度稀疏化和量化方法来减少通信流量。我们发现前期研究存在三个限制。首先&#xff0c;他们…

基于python+vue网络相册设计与实现flask-django-nodejs-php

网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0…

蓝桥杯2021年第十三届省赛真题-卡片

一、题目 卡片 小蓝有很多数字卡片&#xff0c;每张卡片上都是数字 0 到 9。 小蓝准备用这些卡片来拼一些数&#xff0c;他想从 1 开始拼出正整数&#xff0c;每拼一个&#xff0c; 就保存起来&#xff0c;卡片就不能用来拼其它数了。 小蓝想知道自己能从 1 拼到多少。 例如&am…

Cookie和Session登录注册案例

文章目录 一、需求说明![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f29467ed6b7f4de7a568004ad50de591.png)二、用户登录1、Dao层代码2、Service层代码3、Web层代码 三、记住用户四、用户注册五、展示验证码 一、需求说明 二、用户登录 1、Dao层代码 UserMapp…

双指针(滑动窗口)-算法刷题

一.移动零 算法思想 &#xff1a; 设置两个指针left,right&#xff0c;将数组分为三块[0,left]为不为0的元素&#xff0c;[left1,right-1]为0元素&#xff0c;[right,num.size()-1]为未扫描的区域&#xff0c;判断right位置&#xff0c;不为0元素则与left1位置元素交换,left和r…

使用jupyter-Python进行模拟股票分析

tushare财经数据接口包 pip install tushare作用&#xff1a;提供相关指定的财经数据 需求&#xff1a;股票分析 使用tushare包获取某股票的历史行情数据 输出该股票所有收盘比开盘上涨3%以上的日期 输出该股票所有开盘比前日收盘跌幅超过2%的日期 假如我从2015年1月1日开…

人像抠图HumanSeg——基于大规模电话会议视频数据集的连接感知人像分割

前言 人像抠图将图像中的人物与背景进行像素级别的区分的技术。通过人像分割&#xff0c;可以实现诸如背景虚化、弹幕穿人等各种有趣的功能&#xff0c;为视频通话和影音观看提供更加优质和丰富的体验。由于广泛部署到Web、手机和边缘设备&#xff0c;肖像分割在兼顾分割精度的…

TinyEMU源码分析之虚拟机初始化

TinyEMU源码分析之虚拟机初始化 1 初始化结构参数2 配置RAM地址空间3 初始化设备4 拷贝BIOS和Kernel5 手动写入5条指令6 体验第一条指令的执行 本文属于《 TinyEMU模拟器基础系列教程》之一&#xff0c;欢迎查看其它文章。 本文中使用的代码&#xff0c;均为伪代码&#xff0c…

【LeetCode】--- 动态规划 集训(一)

目录 一、1137. 第 N 个泰波那契数1.1 题目解析1.2 状态转移方程1.3 解题代码 二、面试题 08.01. 三步问题2.1 题目解析2.2 状态转移方程2.3 解题代码 三、746. 使用最小花费爬楼梯3.1 题目解析3.2 状态转移方程3.3 解题代码 一、1137. 第 N 个泰波那契数 题目地址&#xff1a…

Python中的线程池与进程池:并行编程的高效选择【第145篇—并行编程】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python中的线程池与进程池&#xff1a;并行编程的高效选择 在Python编程中&#xff0c;实现…

[Linux]条件变量:实现线程同步(什么是条件变量、为什么需要条件变量,怎么使用条件变量(接口)、例子,代码演示(生产者消费者模式))

目录 一、条件变量 1.什么是条件变量 故事说明 2、为什么需要使用条件变量 竞态条件 3.什么是同步 饥饿问题 二、条件变量的接口 1.pthread_cond_t 2.初始化&#xff08;pthread_cond_init&#xff09; 3.销毁&#xff08;pthread_cond_destroy&#xff09; 4.等待&…

联发科MT8797迅鲲1300T规格参数_MTK5G安卓核心板方案定制

联发科MT8797&#xff08;迅鲲1300T&#xff09;平台采用Arm Cortex-A78和Cortex-A55组成的八核架构CPU&#xff0c;以及Arm Mali-G77MC9九核GPU&#xff0c;集成了AI处理器MediaTek APU&#xff0c;支持5G Sub-6GHz全频段和5G双载波聚合,支持1.08亿像素拍照和多镜头组合,以及1…

《逆水寒》“公费追星”被骂上热搜,玩家为何如此抗拒剧游联动?

游戏行业最近真是风波不断。 《逆水寒》手游因为和武侠剧《莲花楼》深入联动而遭到玩家抵制&#xff0c;网易游戏测评总监被质疑“公费追星”&#xff0c;还波及到了成毅、陈都灵等多位演员。 尤其是《莲花楼》的男主角成毅&#xff0c;遭到大量《逆水寒》手游玩家的吐槽调侃…

Java项目:70 ssm小学生课外知识学习网站+vue

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 管理员&#xff1b;首页、个人中心、医护人员管理、科室管理、病人管理、病房管理、病人信息管理、病历管理、医嘱管理、手术安排管理、药品信…

Shell脚本学习-if循环

最小化的if语句 无实际用途 if [ ] ;then echo fi 脚本解释 if 判断 [ ] 里面的条件是否成立 后面跟then&#xff0c;代表条件成立 如果在一行则使用分号隔离&#xff08;;&#xff09; 如果不在一行使用则直接在下一行驶入then即可。 如果条件成立则输出echo 后面…

GEC6818——QT开发之两个UI界面切换与表格显示DHT11数据

GEC6818——QT开发之两个UI界面切换与表格显示DHT11数据 使用环境: ubantu16 QT5.7 开发板GEC6818 实现要求&#xff1a; 利用A53按键1、按键2与温湿度传感器完成QT界面动态显示温湿度记录&#xff0c;并指定温湿度记录超过指定范围&#xff0c;进行报警&#xff08;LED&#…

企业网络基础设施物理安全面临全新挑战

企业网络基础设施的物理安全是确保业务连续性和数据完整性的关键组成部分。随着技术的发展和环境的变化&#xff0c;这些基础设施面临着新的挑战。以下是一些主要的挑战和的解决方案 一、机房、仓库、档案馆物理安全事件频发的挑战&#xff1a; 1.电力安全事件&#xff1a;市…

HTML5+CSS3+JS小实例:创意罗盘时钟

实例:创意罗盘时钟 技术栈:HTML+CSS+JS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=…

优惠:阿里云4核16G服务器优惠价格26.52元1个月、149.00元半年

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…

网络安全实训Day5

写在前面 昨天忘更新了......讲的内容不多&#xff0c;就一个NAT。 之前记的NAT的内容&#xff1a;blog.csdn.net/Yisitelz/article/details/131840119 网络安全实训-网络工程 NAT 公网地址与私网地址 公网地址 可以在互联网上被寻址&#xff0c;由运营商统一分配全球唯一的I…