3D旋转tab图
上图
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D旋转tab图</title><style>* {margin: 0;padding: 0;}body {height: 100vh;background: linear-gradient(to top, #29323c, #485563);}.container {width: 500px;display: flex;position: absolute;left: 50%;top: 50%;transform: translate(-45%, -50%);color: #ffffff;text-transform: uppercase;perspective: 1300px;}input {display: none;}.labels {height: 250px;display: flex;flex-direction: column;justify-content: space-between;}.tab {width: 100px;height: 80px;line-height: 80px;text-align: center;cursor: pointer;}.tab:nth-child(1) {background-color: #00b4db;}.tab:nth-child(2) {background-color: #009bc5;}.tab:nth-child(3) {background-color: #007ba4;}.content {width: 95%;height: 230px;position: absolute;display: flex;justify-content: center;align-items: center;flex-direction: column;background-color: red;}.content h1 {font-size: 28px;}.content p {font-size: 14px;}.content:nth-child(1) {background-color: #00b4db;transform: rotateX(-270deg) translateY(-115px);transform-origin: top center;}.content:nth-child(2) {background-color: #009bc5;transform: translateZ(115px);}.content:nth-child(3) {background-color: #007ba4;transform: rotateX(-90deg) translateY(115px);transform-origin: bottom center;}.cube {position: relative;flex: 1;transform-style: preserve-3d;transition: transform 0.5s ease-in;}#top:checked ~ .cube {transform: rotateX(-90deg);}#middle:checked ~ .cube {transform: rotateX(0deg) translateY(10px);}#bottom:checked ~ .cube {transform: rotateX(90deg);}</style>
</head>
<body>
<div class="container"><input type="radio" name="tabs" id="top" checked/><input type="radio" name="tabs" id="middle"/><input type="radio" name="tabs" id="bottom"/><div class="cube"><div class="content"><h1>top content</h1><p>this is top content</p></div><div class="content"><h1>middle content</h1><p>this is middle content</p></div><div class="content"><h1>bottom content</h1><p>this is bottom content</p></div></div><div class="labels"><label for="top" class="tab">top</label><label for="middle" class="tab">middle</label><label for="bottom" class="tab">bottom</label></div>
</div>
</body>
</html>
相关文章：
3D旋转tab图
上图 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>3D旋转tab图</title><style>* {margin: 0;padding: 0;}body {height: 100vh;background: linear-gradient(to top, #29323c, #…...
openGL 三:矩阵和向量
1.使用glm数学库进行矩阵和向量的计算 2.位置坐标可以看做一个向量 3.向量的移动，缩放，旋转，都是可以通过和矩阵的计算得出 4.向量的缩放乘一个44的矩阵 5.注意事项（有些版本的glm::mat4 不是默认构建一个单位44的矩阵）…...
Socket和Http的通讯原理，遇到攻击会受到哪些影响以及如何解决攻击问题。
德迅云安全-领先云安全服务与解决方案提供商 Socket和HTTP通信原理： Socket通信原理： Socket是一种应用程序编程接口（API），用于在单个进程或多个进程之间进行通信。它提供了一种灵活的、异步的通信方式，使…...
【springboot】整合redis
1.前提条件:docker安装好了redis确定redis可以访问 可选软件: 2.测试代码 (1)redis依赖 org.springframework.boot spring-boot-starter-data-redis (2)配置redis （3） 注入 Resource StringRedisTemplate stringRedisTemplate; 对键进行操作 –o…...
回溯和分支算法
状态空间图 “图”——状态空间图 例子：农夫过河问题——“图”状态操作例子：n后问题、0-1背包问题、货郎问题(TSP) 用向量表示解，“图”由解向量扩张得到的解空间树。 ——三种图：n叉树、子集树、排序树 剪枝 不满住条件的…...
深入理解：指针变量的解引用 与 加法运算
前言 指针变量的解引用和加法运算是非常高频的考点，也是难点，因为对初学者的不友好，这就导致了各大考试都很喜欢在这里出题，通常会伴随着强制类型转换、二维数组、数组指针等一起考查大家对指针的理解。但是不要怕，也许…...
Docker 镜像构建的最佳做法
一、镜像分层 使用docker image history命令，可以看到用于在镜像中创建每个层的命令。 1、 使用docker image history命令查看创建的入门镜像中的层。 docker image history getting-started 您应该得到如下所示的输出： IMAGE CREATED…...
工作上Redis安装及配置
下载redis软件 第一步：解压压缩包 tar -zxvf redis-7.0.14.tar.gz 第二步：移动redis存放目录（结合个人需求而定！） redis-7.0.14：解压后的文件路径 /usr/local：移动后的文件路径 mv redis-7.0.…...
电商项目之Web实时消息推送（附源码）
文章目录 1 问题背景2 前言3 什么是消息推送4 短轮询5 长轮询5.1 demo代码 6 iframe流6.1 demo代码 7 SSE7.1 demo代码7.2 生产环境的应用 （重要） 8 MQTT 1 问题背景 扩宽自己的知识广度，研究一下web实时消息推送 2 前言 文章参考自Web 实时消…...
上机实验四 哈希表设计 西安石油大学数据结构
实验名称：哈希表设计 （1）实验目的：掌握哈希表的设计方法及其冲突解决方法。 （2）主要内容： 已知一个含有10个学生信息的数据表，关键字为学生“姓名”的拼音，给出此表的一…...
Ubuntu22.04 交叉编译mp4V2 for Rv1106
一、配置工具链环境 sudo vim ~/.bashrc在文件最后添加 export PATH$PATH:/opt/arm-rockchip830-linux-uclibcgnueabihf/bin 保存，重启机器 二、下载mp4v2 下载路径：MP4v2 | mp4v2 三、修改CMakeLists.txt 四、执行编译 mkdir build cd buildcmak…...
缓存穿透、击穿、雪崩
缓存穿透： 指的是恶意用户或攻击者通过请求不存在于缓存和后端存储中的数据来使得所有请求都落到后端存储上，导致系统瘫痪。 解决方案： 通常包括使用布隆过滤器或者黑白名单等方式来过滤掉无效请求，以及在应用程序中加入缓存预热…...
(1w字一篇理解透Unsafe类)Java魔法类:Unsafe详解
Java魔法类 Unsafe 文章导读：(约12015字，阅读时间大约1小时)1. Unsafe介绍2. Unsafe创建3. Unsafe功能3.1内存操作3.2 内存屏障3.3 对象操作3.4 数组操作3.5 CAS操作3.6 线程调度3.7 Class操作3.8 系统信息 4. 总结 JUC源码中的并发工具类出现过很多次 …...
Python的正则表达式使用
Python的正则表达式使用 定义使用场景查替换分割 常用的正则表达符号查原字符英文状态的句号点 .反斜杠 \英文的[]英文的()英文的?加号 星号 *英文状态的大括号 {} 案例 定义 正则表达式是指专门用于描述或刻画字符串内在规律的表达式。 使用场景 无法通过切片，…...
Elasticsearch：评估 RAG - 指标之旅
作者：Quentin Herreros，Thomas Veasey，Thanos Papaoikonomou 2020年，Meta发表了一篇题为 “知识密集型NLP任务的检索增强生成” 的论文。 本文介绍了一种通过利用外部数据库将语言模型 (LLM) 知识扩展到初始训练数据之外的方法。 …...
【2023.12.4练习】数据库知识点复习测试
概论 数据表：用于存储现实中数据的联系。 储存信息联系。 字段：又称列，如姓名、年龄、编号等。 记录：又称元组，为数据表中的一行，代表了一个实体的信息。 数据库（DB）࿱…...
【wvp】测试记录
ffmpeg 这是个莫名其妙的报错，通过排查，应该是zlm哪个进程引起的 会议室的性能 网络IO也就20M...
【若依框架实现上传文件组件】
若依框架中只有个人中心有上传图片组件，但是这个组件不适用于el-dialog中的el-form表单页面 于是通过elementui重新写了一个上传组件，如图是实现效果 vue代码 <el-dialog :title"title" v-model"find" width"600px"…...
玩转大数据5:构建可扩展的大数据架构
1. 引言 随着数字化时代的到来，大数据已经成为企业、组织和个人关注的焦点。大数据架构作为大数据应用的核心组成部分，对于企业的数字化转型和信息化建设至关重要。我们将探讨大数据架构的基本要素和原则，以及Java在大数据架构中的角色&…...
【华为数据之道学习笔记】非数字原生企业的特点
非数字原生企业的数字化转型挑战 软件和数据平台为核心的数字世界入口，便捷地获取和存储了大量的数据，并开始尝试通过机器学习等人工智能技术分析这些数据，以便更好地理解用户需求，增强数字化创新能力。部分数字原生企业引领着云计…...
网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞！！！ 抽象 现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践
6月5日，2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席，并作《智能体在安全领域的应用实践》主题演讲，分享了在智能体在安全领域的突破性实践。他指出，百度通过将安全能力…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程？ 2. Java创建对象的过程？ 3. 对象的生命周期？ 4. 类加载器有哪些？ 5. 双亲委派模型的作用（好处）？ 6. 讲一下类的加载和双亲委派原则？ 7. 双亲委派模…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下，限制某个 IP 的访问频率是非常重要的，可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案，使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
小木的算法日记-多叉树的递归/层序遍历
🌲 从二叉树到森林：一文彻底搞懂多叉树遍历的艺术 🚀 引言 你好，未来的算法大神！ 在数据结构的世界里，“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的，它…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...
医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor
1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...