css3d制作正方体

使用css3d技术 ,制作一个可以动态动画的正方体模型
效果图:
在这里插入图片描述
请添加图片描述

代码如下:

<!DOCTYPE html>
<html>
<head><style>/* 设置高度宽度100%并且左右居中、上下居中 */html,body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
/* 设置单面的高宽 */.box {width: 50px;height: 50px;/* 3D视距 */perspective: 1000px;}
/* 设置面里的字体大小居中、绝对定位 */.box div {font-size: 20px;text-align: center;width: 100%;height: 100%;position: absolute;}
/* 设置3D动画以及特效旋转 */main {width: 100%;height: 100%;transform-style: preserve-3d;/* 第一个参数是关键帧的名字、第二个参数是动画的时长、第三个参数是动画从头到尾的速度始终一致、第四个参数是播放的次数infinite无限次 */animation: rotate 10s linear infinite;}.front {background: rgba(100, 0, 100, 0.6);/* 将div沿Z轴向前移动50px */transform: translateZ(25px);}.back {background: rgba(0, 100, 100, 0.5);/* 将div沿Z轴向后移动50px */transform: translateZ(-25px);}.left {background: rgba(100, 1000, 100, 0.5);/* 将div沿Y轴旋转90度,Z轴向后移动50px */transform: rotateY(90deg) translateZ(-25px);}.right {background: rgba(1000, 100, 100, 0.5);/* 将div沿Y轴旋转90度,Z轴向前移动50px */transform: rotateY(90deg) translateZ(25px);}.top {background: rgba(1000, 0, 0, 0.5);/* 将div沿X轴旋转90度,Z轴向前移动50px */transform: rotateX(90deg) translateZ(25px);}.bottom {background: rgba(0, 0, 1000, 0.5);/* 将div沿X轴旋转90度,Z轴向后移动50px */transform: rotateX(90deg) translateZ(-25px);} @keyframes rotate {from {/* 动画起始位置 */transform: rotateX(0) rotateY(0);}to {/* 动画终点位置 */transform: rotateX(360deg) rotateY(360deg);}}</style>
</head><body><div class="box"><main><div class="front"></div><div class="back"></div><div class="left"></div><div class="right"></div><div class="top"></div><div class="bottom"></div><main></div>
</body></html>

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

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

相关文章

RENISHAW雷尼绍双读数头系统应用分享

在精密回转运动控制中&#xff0c;大多数场合都会对系统的回转定位精度有严格的要求&#xff0c;RENISHAW雷尼绍圆光栅系统&#xff08;RESM增量和RESA绝对值&#xff09;对于回转角度的反馈测量方案能有效的解决运动控制对回转精度的需求。但是配置单个读数头的圆光栅系统的精…

C#最优队列最小堆小顶堆大顶堆小根堆大根堆PriorityQueue的使用

最优队列有多种叫法&#xff0c;什么小根堆&#xff0c;大根堆&#xff0c;小顶堆&#xff0c;大顶堆。 队列分多种&#xff0c;线性队列&#xff08;简单队列&#xff09;&#xff0c;循环队列&#xff0c;最优队列等等。 最优队列&#xff0c;可以看作堆叠箱子&#xff0c;…

3分钟看懂设计模式01:策略模式

一、什么是策略模式 定义一些列算法类&#xff0c;将每一个算法封装起来&#xff0c;并让它们可以互相替换。 策略模式让算法独立于使用它的客户而变化&#xff0c;是一种对象行为型模式。 以上是策略模式的一般定义&#xff0c;属于是课本内容。 在没有真正理解策略模式之…

简单几步通过DD工具把云服务器系统Linux改为windows

简单几部通过DD安装其他系统&#xff0c;当服务器的web控制台没有我们要装的系统&#xff0c;就需要通过DD&#xff08;Linux磁盘&#xff09;工具来更改系统&#xff0c;&#xff08;已知支持KVM系统&#xff09; 本文如何简单的更换系统&#xff0c;不通过web控制台来更换&a…

Hive【内部表、外部表、临时表、分区表、分桶表】【总结】

目录 Hive的物种表结构特性 一、内部表 建表 使用场景 二、外部表 建表:关键词【EXTERNAL】 场景&#xff1a; 外部表与内部表可互相转换 三、临时表 建表 临时表横向对比​编辑 四、分区表 建表&#xff1a;关键字【PARTITIONED BY】 场景&#xff1a; 五、分桶表 …

算能RISC-V通用云开发空间编译pytorch @openKylin留档

终于可以体验下risc-v了&#xff01; 操作系统是openKylin&#xff0c;算能的云空间 尝试编译安装pytorch 首先安装git apt install git 然后下载pytorch和算能cpu的库&#xff1a; git clone https://github.com/sophgo/cpuinfo.git git clone https://github.com/pytorc…

小米14 Ultra:未来科技的集大成者

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

opencv图像的本质

目的 OpenCV是一个跨平台的库&#xff0c;使用它我们可以开发实时的计算机视觉应用程序。 它主要集中在图像处理&#xff0c;视频采集和分析&#xff0c;包括人脸检测和物体检测等功能。 数字图像在计算机中是以矩阵形式存储的&#xff0c;矩阵中的每一个元素都描述一定的图像…

VSCode React JavaScript Snippets 插件的安装与使用指南

VSCode React JavaScript Snippets 插件的安装与使用指南 在开发 React 项目时&#xff0c;提高效率是每个开发者都追求的目标之一。VSCode React JavaScript Snippets 插件就是为了提升 React 开发效率而设计的&#xff0c;它为常用的 React 代码片段提供了快捷键&#xff0c;…

NXP实战笔记(六):S32K3xx基于RTD-SDK在S32DS上配置PWM发波

目录 1、概述 2、SDK配置 2.1、Port配置 2.2、Emios_Mcl_Ip 2.3、Emios_Pwm 2.4、代码示例 1、概述 针对S32K3xx芯片&#xff0c;产生PWM的硬件支持单元仅有两个&#xff0c;分别是eMiosx与Flexio. 生成PWM的顺序&#xff0c;按照单片机所用资源进行初始化执行如下 初始化…

原型模式(Prototype Pattern) C++

上一节&#xff1a;建造者模式&#xff08;Builder Pattern&#xff09;C 文章目录 0.理论1.原型模式的核心组成&#xff1a;2.实现方法3.什么时候使用 1.实践步骤 1: 定义怪物原型步骤 2: 实现具体怪物原型步骤 3: 使用原型创建怪物 0.理论 原型模式&#xff08;Prototype P…

7-liunx服务器规范

目录 概况liunx日志liunx系统日志syslog函数openlog 可以改变syslog默认输出方式 &#xff0c;进一步结构化 用户信息进程间的关系会话ps命令查看进程关系 系统资源限制改变工作目录和根目录服务器程序后台话 概况 liunx服务器上有很多细节需要注意 &#xff0c;这些细节很重要…

服务网格Service Mesh和Istio

文章目录 服务网格&#xff08;Service Mesh&#xff09;市场上三种服务网格解决方案服务网格的特征流量管理安全性可观察性 Istio简介Istio提供了什么功能服务 &#xff1f;Istio 核心特性流量管理安全可观察性 平台支持 服务网格&#xff08;Service Mesh&#xff09; 服务网…

Eureka注册中心(黑马学习笔记)

Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f; 有多个user-service实例地址&#xff0c…

TreeData 数据查找

TreeData 数据查找 最近做需求的时候遇到了这样的一个需求&#xff0c;Tree组件数据支持查找&#xff0c;而且TreeData的数据层级是无限级的 开始想的事借助UI组件库&#xff08;Ant-design-vue&#xff09;中的Tree组件的相关方法直接实现,看了下api 发现没法实现&#xff0c;…

超级实用的python代码片段汇总和详细解析(16个)

目录 1. 生成随机文本 2. 计算文本文件中的字数 3. 替换文件文件中的字串 4. 多文件名的批量替换 5. 从网站提取数据 6. 批量下载图片 7.批量删除空文件夹 8.Excel表格读写 9.合并Excel表格工作簿 10.数据库SQL查询 11. 系统进程查杀 12.图像尺寸调整和裁剪 13.图…

redis实现消息队列redis发布订阅redis监听key

文章目录 Redis消息队列实现异步秒杀1. jvm阻塞队列问题2. 什么是消息队列3. Redis实现消息队列1. 基于List结构模拟消息队列操作优缺点 2. 基于PubSub发布订阅的消息队列操作优缺点spring 结合redis的pubsub使用示例1. 引入依赖2. 配置文件3. RedisConfig4. CustomizeMessageL…

大语言模型的开山之作—探秘GPT系列:GPT-1-GPT2-GPT-3的进化之路

模型模型参数创新点评价GPT1预训练微调&#xff0c; 创新点在于Task-specific input transformations。GPT215亿参数预训练PromptPredict&#xff0c; 创新点在于Zero-shotZero-shot新颖度拉满&#xff0c;但模型性能拉胯GPT31750亿参数预训练PromptPredict&#xff0c; 创新点…

pclpy 可视化点云(多窗口可视化、单窗口多点云可视化)

pclpy 可视化点云&#xff08;多窗口可视化、单窗口多点云可视化&#xff09; 一、算法原理二、代码三、结果1.多窗口可视化结果2.单窗口多点云可视化 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多建立2个窗…

ESP8266智能家居(3)——单片机数据发送到mqtt服务器

1.主要思想 前期已学习如何用ESP8266连接WIFI&#xff0c;并发送数据到服务器。现在只需要在单片机与nodeMCU之间建立起串口通信&#xff0c;这样单片机就可以将传感器测到的数据&#xff1a;光照&#xff0c;温度&#xff0c;湿度等等传递给8266了&#xff0c;然后8266再对数据…