当前位置： 首页 > news >正文

3D旋转tab图

news 2026/3/27 4:31:38

上图

代码

<!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, #…...

编程日记 2023/12/5 5:22:31

openGL 三:矩阵和向量

1.使用glm数学库进行矩阵和向量的计算 2.位置坐标可以看做一个向量 3.向量的移动&#xff0c;缩放&#xff0c;旋转&#xff0c;都是可以通过和矩阵的计算得出 4.向量的缩放乘一个44的矩阵 5.注意事项&#xff08;有些版本的glm::mat4 不是默认构建一个单位44的矩阵&#xff09…...

编程日记 2023/12/5 5:21:30

Socket和Http的通讯原理，遇到攻击会受到哪些影响以及如何解决攻击问题。

德迅云安全-领先云安全服务与解决方案提供商 Socket和HTTP通信原理&#xff1a; Socket通信原理&#xff1a; Socket是一种应用程序编程接口&#xff08;API&#xff09;&#xff0c;用于在单个进程或多个进程之间进行通信。它提供了一种灵活的、异步的通信方式&#xff0c;使…...

编程日记 2023/12/5 5:20:29

【springboot】整合redis

1.前提条件:docker安装好了redis确定redis可以访问 可选软件: 2.测试代码 (1)redis依赖 org.springframework.boot spring-boot-starter-data-redis (2)配置redis &#xff08;3&#xff09; 注入 Resource StringRedisTemplate stringRedisTemplate; 对键进行操作 –o…...

编程日记 2023/12/5 5:19:28

回溯和分支算法

状态空间图 “图”——状态空间图 例子&#xff1a;农夫过河问题——“图”状态操作例子&#xff1a;n后问题、0-1背包问题、货郎问题(TSP) 用向量表示解&#xff0c;“图”由解向量扩张得到的解空间树。 ——三种图&#xff1a;n叉树、子集树、排序树 ​ 剪枝 不满住条件的…...

编程日记 2023/12/5 5:17:26

深入理解：指针变量的解引用 与 加法运算

前言 指针变量的解引用和加法运算是非常高频的考点&#xff0c;也是难点&#xff0c;因为对初学者的不友好&#xff0c;这就导致了各大考试都很喜欢在这里出题&#xff0c;通常会伴随着强制类型转换、二维数组、数组指针等一起考查大家对指针的理解。但是不要怕&#xff0c;也许…...

编程日记 2023/12/5 5:16:25

Docker 镜像构建的最佳做法

一、镜像分层 使用docker image history命令&#xff0c;可以看到用于在镜像中创建每个层的命令。 1、 使用docker image history命令查看创建的入门镜像中的层。 docker image history getting-started 您应该得到如下所示的输出&#xff1a; IMAGE CREATED…...

编程日记 2023/12/5 5:15:24

工作上Redis安装及配置

下载redis软件 第一步&#xff1a;解压压缩包 tar -zxvf redis-7.0.14.tar.gz 第二步&#xff1a;移动redis存放目录&#xff08;结合个人需求而定&#xff01;&#xff09; redis-7.0.14&#xff1a;解压后的文件路径 /usr/local&#xff1a;移动后的文件路径 mv redis-7.0.…...

编程日记 2023/12/5 5:14:23

电商项目之Web实时消息推送（附源码）

文章目录 1 问题背景2 前言3 什么是消息推送4 短轮询5 长轮询5.1 demo代码 6 iframe流6.1 demo代码 7 SSE7.1 demo代码7.2 生产环境的应用 &#xff08;重要&#xff09; 8 MQTT 1 问题背景 扩宽自己的知识广度&#xff0c;研究一下web实时消息推送 2 前言 文章参考自Web 实时消…...

编程日记 2023/12/5 5:13:22

上机实验四 哈希表设计 西安石油大学数据结构

实验名称&#xff1a;哈希表设计 &#xff08;1&#xff09;实验目的&#xff1a;掌握哈希表的设计方法及其冲突解决方法。 &#xff08;2&#xff09;主要内容&#xff1a; 已知一个含有10个学生信息的数据表&#xff0c;关键字为学生“姓名”的拼音&#xff0c;给出此表的一…...

编程日记 2023/12/5 5:11:20

Ubuntu22.04 交叉编译mp4V2 for Rv1106

一、配置工具链环境 sudo vim ~/.bashrc在文件最后添加 export PATH$PATH:/opt/arm-rockchip830-linux-uclibcgnueabihf/bin 保存&#xff0c;重启机器 二、下载mp4v2 下载路径&#xff1a;MP4v2 | mp4v2 三、修改CMakeLists.txt 四、执行编译 mkdir build cd buildcmak…...

编程日记 2023/12/5 5:10:19

缓存穿透、击穿、雪崩

缓存穿透&#xff1a; 指的是恶意用户或攻击者通过请求不存在于缓存和后端存储中的数据来使得所有请求都落到后端存储上&#xff0c;导致系统瘫痪。 解决方案&#xff1a; 通常包括使用布隆过滤器或者黑白名单等方式来过滤掉无效请求&#xff0c;以及在应用程序中加入缓存预热…...

编程日记 2023/12/5 5:09:17

(1w字一篇理解透Unsafe类)Java魔法类:Unsafe详解

Java魔法类 Unsafe 文章导读&#xff1a;(约12015字&#xff0c;阅读时间大约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源码中的并发工具类出现过很多次 …...

编程日记 2023/12/5 5:08:16

Python的正则表达式使用

Python的正则表达式使用 定义使用场景查替换分割 常用的正则表达符号查原字符英文状态的句号点 .反斜杠 \英文的[]英文的()英文的?加号 星号 *英文状态的大括号 {} 案例 定义 正则表达式是指专门用于描述或刻画字符串内在规律的表达式。 使用场景 无法通过切片&#xff0c;…...

编程日记 2023/12/5 5:07:14

Elasticsearch：评估 RAG - 指标之旅

作者&#xff1a;Quentin Herreros&#xff0c;Thomas Veasey&#xff0c;Thanos Papaoikonomou 2020年&#xff0c;Meta发表了一篇题为 “知识密集型NLP任务的检索增强生成” 的论文。 本文介绍了一种通过利用外部数据库将语言模型 (LLM) 知识扩展到初始训练数据之外的方法。 …...

编程日记 2023/12/5 5:05:13

【2023.12.4练习】数据库知识点复习测试

概论 数据表&#xff1a;用于存储现实中数据的联系。 储存信息联系。 字段&#xff1a;又称列&#xff0c;如姓名、年龄、编号等。 记录&#xff1a;又称元组&#xff0c;为数据表中的一行&#xff0c;代表了一个实体的信息。 数据库&#xff08;DB&#xff09;&#xff1…...

编程日记 2023/12/5 5:04:11

【wvp】测试记录

ffmpeg 这是个莫名其妙的报错&#xff0c;通过排查&#xff0c;应该是zlm哪个进程引起的 会议室的性能 网络IO也就20M...

编程日记 2023/12/5 5:03:10

【若依框架实现上传文件组件】

若依框架中只有个人中心有上传图片组件&#xff0c;但是这个组件不适用于el-dialog中的el-form表单页面 于是通过elementui重新写了一个上传组件&#xff0c;如图是实现效果 vue代码 <el-dialog :title"title" v-model"find" width"600px"…...

编程日记 2023/12/5 4:59:08

玩转大数据5:构建可扩展的大数据架构

1. 引言 随着数字化时代的到来&#xff0c;大数据已经成为企业、组织和个人关注的焦点。大数据架构作为大数据应用的核心组成部分&#xff0c;对于企业的数字化转型和信息化建设至关重要。我们将探讨大数据架构的基本要素和原则&#xff0c;以及Java在大数据架构中的角色&…...

编程日记 2023/12/5 4:58:07

【华为数据之道学习笔记】非数字原生企业的特点

非数字原生企业的数字化转型挑战 软件和数据平台为核心的数字世界入口&#xff0c;便捷地获取和存储了大量的数据&#xff0c;并开始尝试通过机器学习等人工智能技术分析这些数据&#xff0c;以便更好地理解用户需求&#xff0c;增强数字化创新能力。部分数字原生企业引领着云计…...

编程日记 2023/12/5 4:57:06

X-TRACK二次开发终极指南：如何基于开源框架快速扩展新功能

X-TRACK二次开发终极指南&#xff1a;如何基于开源框架快速扩展新功能 【免费下载链接】X-TRACK A GPS bicycle speedometer that supports offline maps and track recording 项目地址: https://gitcode.com/gh_mirrors/xt/X-TRACK X-TRACK是一款支持离线地图和轨迹记…...

编程新知 2026/3/27 4:29:58

本地Cookie导出终极指南：Get cookies.txt LOCALLY 安全使用教程

本地Cookie导出终极指南&#xff1a;Get cookies.txt LOCALLY 安全使用教程 【免费下载链接】Get-cookies.txt-LOCALLY Get cookies.txt, NEVER send information outside. 项目地址: https://gitcode.com/gh_mirrors/ge/Get-cookies.txt-LOCALLY 你是否曾担心浏览器Coo…...

编程新知 2026/3/27 3:57:37

别再拷贝sxs文件夹了！Win10教育版1903安装.NET 3.5最简方案（实测有效）

彻底解决Win10安装.NET 3.5报错0x800F081F的高效方案 每次在Win10上安装.NET Framework 3.5时遇到0x800F081F错误&#xff0c;都让人抓狂。网上那些让你拷贝sxs文件夹的教程&#xff0c;99%都在误导人。作为一位经历过无数次失败的老手&#xff0c;我要分享的是经过上百次验证的…...

编程新知 2026/3/27 3:39:22

ES核心索引机制深度解析：从“正排”与“倒排”的底层原理到实战应用场景

1. 正排索引与倒排索引的本质区别 第一次接触Elasticsearch时&#xff0c;我被"正排"和"倒排"这两个概念绕得头晕。直到有次做商品搜索功能&#xff0c;才真正理解它们的差异。想象你面前有两本电话簿&#xff1a;一本按人名排序&#xff08;正排&#xff…...

编程新知 2026/3/27 3:25:06

企业级vGPU选型指南：从GRID vApps到vCS，4种NVIDIA虚拟GPU场景化对比

企业级虚拟GPU技术选型全景指南&#xff1a;四大应用场景深度解析 在数字化转型浪潮中&#xff0c;图形处理单元(GPU)的虚拟化技术正成为企业IT架构的关键支柱。无论是设计团队的3D建模、数据分析师的机器学习任务&#xff0c;还是全公司范围的虚拟桌面部署&#xff0c;虚拟GPU…...

编程新知 2026/3/27 3:19:05

【实战篇】OneWire时序精解：从复位脉冲到DS18B20温度读取

1. OneWire协议基础&#xff1a;单线通信的魔法 第一次接触OneWire&#xff08;单总线&#xff09;协议时&#xff0c;我盯着那根孤零零的信号线愣了半天——这根线既要供电又要传数据&#xff0c;还要协调多个设备&#xff0c;简直像用一根吸管同时喝奶茶、吃珍珠和传情书。但…...

编程新知 2026/3/27 3:17:02

技术突破：抖音下载工具的全流程实战指南

技术突破&#xff1a;抖音下载工具的全流程实战指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容爆炸的时代&#xff0c;高效获取和管理短视频资源已成为创作者、研究者和普通用户的核心需求。…...

编程新知 2026/3/27 2:50:47

节能模式实战：OpenClaw+GLM-4.7-Flash定时任务调度

节能模式实战&#xff1a;OpenClawGLM-4.7-Flash定时任务调度 1. 为什么需要节能模式 上个月我的电费账单突然暴涨了40%&#xff0c;排查后发现是那台24小时运行的开发机惹的祸。这台机器不仅要跑OpenClaw智能体&#xff0c;还要负载GLM-4.7-Flash模型推理&#xff0c;风扇整…...

编程新知 2026/3/27 2:40:46

Midscene.js从入门到精通：AI驱动的跨平台自动化技术指南

Midscene.js从入门到精通&#xff1a;AI驱动的跨平台自动化技术指南 【免费下载链接】midscene Let AI be your browser operator. 项目地址: https://gitcode.com/GitHub_Trending/mid/midscene 在数字化时代&#xff0c;软件界面的动态变化和跨平台兼容性给自动化测试…...

编程新知 2026/3/27 2:28:43

springboot框架-美妆化妆品商城进货系统

目录系统架构设计技术选型与依赖数据库设计核心功能实现库存预警机制前端交互建议测试与部署扩展性考虑项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作系统架构设计 采用SpringBoot MyBatis-Plus MySQL构建后端&#xff0c;…...

编程新知 2026/3/27 1:34:21