探索 HTML 和 CSS 实现的 3D旋转相册
效果演示
这段HTML与CSS代码创建了一个包含10张卡片的3D旋转效果,每张卡片都有自己的边框颜色和图片。通过CSS的3D变换和动画,实现了一个动态的旋转展示效果

HTML
<div class="wrapper"><div class="inner" style="--quantity: 10;"><div class="card" style="--index: 0;--color-card: 142, 249, 252;"><div class="img"><img src="../../static/3.jpg" alt=""></div></div><div class="card" style="--index: 1;--color-card: 142, 252, 204;"><div class="img"><img src="../../static/4.jpg" alt=""></div></div><div class="card" style="--index: 2;--color-card: 142, 252, 157;"><div class="img"><img src="../../static/5.jpg" alt=""></div></div><div class="card" style="--index: 3;--color-card: 215, 252, 142;"><div class="img"><img src="../../static/3.jpg" alt=""></div></div><div class="card" style="--index: 4;--color-card: 252, 252, 142;"><div class="img"><img src="../../static/4.jpg" alt=""></div></div><div class="card" style="--index: 5;--color-card: 252, 208, 142;"><div class="img"><img src="../../static/5.jpg" alt=""></div></div><div class="card" style="--index: 6;--color-card: 252, 142, 142;"><div class="img"><img src="../../static/4.jpg" alt=""></div></div><div class="card" style="--index: 7;--color-card: 252, 142, 239;"><div class="img"><img src="../../static/5.jpg" alt=""></div></div><div class="card" style="--index: 8;--color-card: 204, 142, 252;"><div class="img"><img src="../../static/3.jpg" alt=""></div></div><div class="card" style="--index: 9;--color-card: 142, 202, 252;"><div class="img"><img src="../../static/4.jpg" alt=""></div></div></div>
</div>
- .wrapper:最外层的容器,用于包裹整个3D效果。
- .inner:内部容器,用于包裹所有的卡片,并且设置了–quantity自定义属性,这个值表示卡片的总数,用于计算每个卡片的旋转角度。
- .card:单个卡片的容器,每个卡片都有一个–index属性,表示卡片的索引,用于计算旋转角度,以及–color-card属性,表示卡片的边框颜色。
- .img:图片容器,用于包裹img标签。
- img:图片元素,用于显示卡片上的图片。
CSS
.wrapper {width: 100%;height: 100%;position: relative;text-align: center;display: flex;align-items: center;justify-content: center;overflow: hidden;
}
.inner {--w: 150px;--h: 200px;--translateZ: calc((var(--w) + var(--h)) + 0px);--rotateX: -15deg;--perspective: 1000px;position: absolute;width: var(--w);height: var(--h);top: 25%;left: calc(50% - (var(--w) / 2) - 2.5px);z-index: 2;transform-style: preserve-3d;transform: perspective(var(--perspective));animation: rotating 20s linear infinite;
}@keyframes rotating {from {transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(0);}to {transform: perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(1turn);}
}
.card {position: absolute;border: 2px solid rgba(var(--color-card));border-radius: 12px;overflow: hidden;inset: 0;transform: rotateY(calc((360deg / var(--quantity)) * var(--index))) translateZ(var(--translateZ));
}
.img {width: 100%;height: 100%;object-fit: cover;background: #0000 radial-gradient(circle,rgba(var(--color-card), 0.2) 0%,rgba(var(--color-card), 0.6) 80%,rgba(var(--color-card), 0.9) 100%);
}
.img img {width: 100%;height: 100%;
}
- .wrapper:设置为相对定位,并且使其充满整个视口(viewport),居中显示内容,并且隐藏溢出的内容。
- .inner:设置为绝对定位,并且定义了一些自定义属性,用于计算卡片的宽度、高度、Z轴的平移距离、X轴的旋转角度和透视效果。它还设置了transform-style为preserve-3d,这是实现3D效果的关键属性。此外,它还定义了一个无限循环的rotating动画。
- @keyframes rotating:定义了一个名为rotating的关键帧动画,使.inner容器围绕Y轴旋转。
- .card:设置为绝对定位,并且使用rotateY和translateZ变换来实现卡片的3D旋转效果。每个卡片的旋转角度由–index和–quantity属性计算得出。
- .img:设置图片容器的宽高、对象适应模式和背景渐变效果。
- .img img:设置图片的宽高以填满容器。
相关文章:
探索 HTML 和 CSS 实现的 3D旋转相册
效果演示 这段HTML与CSS代码创建了一个包含10张卡片的3D旋转效果,每张卡片都有自己的边框颜色和图片。通过CSS的3D变换和动画,实现了一个动态的旋转展示效果 HTML <div class"wrapper"><div class"inner" style"-…...
OpenJudge_ 简单英文题_04:0/1 Knapsack
题目 描述 Given the weights and values of N items, put a subset of items into a knapsack of capacity C to get the maximum total value in the knapsack. The total weight of items in the knapsack does not exceed C. 输入 First line: two positive integers N (…...
深入探索离散 Hopfield 神经网络
一、离散 Hopfield 神经网络的起源与发展 离散 Hopfield 神经网络由约翰・霍普菲尔德在 1982 年提出,这一创新性的成果在当时引起了广泛关注,成为早期人工神经网络的重要代表之一。 在那个时期,人工神经网络的发展还处于相对初级的阶段。霍…...
[智能车摄像头是一种安装在汽车上用于辅助驾驶和提高安全性的重要设备]
智能车摄像头是一种安装在汽车上用于辅助驾驶和提高安全性的重要设备。它们通常包括几个不同类型,如前视摄像头、环视摄像头、行车记录仪等。这些摄像头的主要功能有: 前视摄像头(Forward Camera):用于提供驾驶员前方…...
前端vue 列表中回显并下拉选择修改标签
1,vue数据列表中进行回显状态并可以在下拉框中选择修改,效果如下 2,vue 页面关键代码 <el-table-column label"审核" align"center" class-name"small-padding fixed-width" prop"status" >&…...
hbase未来的发展趋势
HBase 作为一个开源的分布式、可伸缩的 NoSQL 数据库,依托于 Hadoop 生态系统,以处理海量结构化数据为优势。随着大数据技术的发展,HBase 的发展趋势主要体现在以下几个方面: 1. 与云计算深度集成 随着企业向云迁移,HBase 也正在越来越多地部署在云环境中。云服务商(如 …...
Rust 语言学习笔记(二)
再继续快速学习一下 Rust 的以下几个知识点,就可以开始着手做点小工具了 基本数据类型复合数据类型基本的流程控制 Rust 设计为有效使用内存考虑的,它提供了非常细力度的数据类型,如整数分为有无符号,宽度从 8 位到 128 位&…...
【postman】怎么通过curl看请求报什么错
获取现成的curl方式: 1,拿别人给的curl 2,手机app界面通过charles抓包,点击接口复制curl 3,浏览器界面-开发者工具-选中接口复制curl 拿到curl之后打开postman,点击import,粘贴curl点击send&am…...
Python 编程入门指南(一)
1. Python 简介 Python是一种广泛使用的高级编程语言,因其简洁的语法和强大的功能而备受欢迎。Python由Guido van Rossum于20世纪90年代初设计,旨在提供易于阅读和编写的代码,适合从初学者到专业开发者的各个水平。它是一种解释型语言,这意味着在编写和执行代码之间不需要…...
macOS 设置固定IP
文章目录 以太网Wifi 基于 macOS 15.1 以太网 Wifi...
redis实现消息队列的几种方式
一、了解 众所周知,redis是我们日常开发过程中使用最多的非关系型数据库,也是消息中间件。实际上除了常用的rabbitmq、rocketmq、kafka消息队列(大家自己下去研究吧~模式都是通用的),我们也能使用redis实现消息队列。…...
debian 系统更新升级
系统升级能够有效避免漏洞导致的损害 不过需要做好提前和后续的测试,避免现有运行程序的错误。 debian安装参考:链接 一、清理过时和不再使用的源 1.清理源 vi /etc/apt/sources.list2.在下面的文件夹下清理不需要的 cd /etc/apt/sources.list.d二、…...
STM32学习笔记-----UART的概念
在 STM32 中,UART(Universal Asynchronous Receiver/Transmitter)是一种常用的串行通信接口,广泛应用于嵌入式系统中。STM32 提供了丰富的硬件资源来支持 UART 通信,可以通过标准库(STM32 HAL 或者标准外设…...
Pytest-Bdd-Playwright 系列教程(9):datatable 参数的使用
Pytest-Bdd-Playwright 系列教程(9):datatable 参数的使用 前言一、什么是 datatable 参数?Gherkin 表格示例 二、datatable 参数的基本使用feature文件:获取用户信息并执行相关操作的使用 datatable 处理表格数据Give…...
【408】SDN重点笔记
总特征:数据平面(负责转发)与控制平面(负责控制)分离 控制平面: 由服务器和软件组成。控制平面完成转发表,并分发。 路由器不再需要路由选择协议,不再交换信息,只负责收到…...
云运维基础
笔记内容侵权联系删除 云审计(CTS) 云审计云上资源变更均可被管控,实时系统性记录所有人的操作,无需手工统计。云审计服务支持将操作记录合并,周期性地生成事件文件实时同步转存到OBS存储桶,帮助用户实现…...
基于微信小程序的平安驾校预约平台的设计与实现(源码+LW++远程调试+代码讲解等)
摘 要 互联网发展至今,广泛参与在社会中的方方面面。它让信息都可以通过网络传播,搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱,出错率高,信息安全性差,劳动强度大,费时费力…...
Rust开发一个命令行工具(一,简单版持续更新)
依赖的包 cargo add clap --features derive clap命令行参数解析 项目目录 代码 main.rs mod utils;use clap::Parser; use utils::{editor::open_in_vscode,fs_tools::{file_exists, get_file, is_dir, list_dir, read_file}, }; /// 在文件中搜索模式并显示包含它的行。…...
实战:深入探讨 MySQL 和 SQL Server 全文索引的使用及其弊端
在数据库中处理大量文本数据时,包含搜索(例如查找包含特定单词的文本)往往是必需的。然而,直接使用 LIKE %text% 的方式在大数据量中进行模糊查询会造成性能瓶颈。为了解决这一问题,MySQL 和 SQL Server 提供了全文索引(Full-Text Indexing)功能,可以显著加速文本数据的…...
情景2 虚拟化世界 自己答案的理解
1、什么是虚拟化? 答:版本很多,选了两个作为参考。 定义1:虚拟化是创造设备或者资源的虚拟版本,如服务器、存储设备、网络或者操作系统。 定义2:虚拟化是资源的逻辑表示,它不受物理限制的约束。 2、寄生…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
Module Federation 和 Native Federation 的比较
前言 Module Federation 是 Webpack 5 引入的微前端架构方案,允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
