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

探索 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旋转效果&#xff0c;每张卡片都有自己的边框颜色和图片。通过CSS的3D变换和动画&#xff0c;实现了一个动态的旋转展示效果 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 年提出&#xff0c;这一创新性的成果在当时引起了广泛关注&#xff0c;成为早期人工神经网络的重要代表之一。 在那个时期&#xff0c;人工神经网络的发展还处于相对初级的阶段。霍…...

[智能车摄像头是一种安装在汽车上用于辅助驾驶和提高安全性的重要设备]

智能车摄像头是一种安装在汽车上用于辅助驾驶和提高安全性的重要设备。它们通常包括几个不同类型&#xff0c;如前视摄像头、环视摄像头、行车记录仪等。这些摄像头的主要功能有&#xff1a; 前视摄像头&#xff08;Forward Camera&#xff09;&#xff1a;用于提供驾驶员前方…...

前端vue 列表中回显并下拉选择修改标签

1&#xff0c;vue数据列表中进行回显状态并可以在下拉框中选择修改&#xff0c;效果如下 2&#xff0c;vue 页面关键代码 <el-table-column label"审核" align"center" class-name"small-padding fixed-width" prop"status" >&…...

hbase未来的发展趋势

HBase 作为一个开源的分布式、可伸缩的 NoSQL 数据库,依托于 Hadoop 生态系统,以处理海量结构化数据为优势。随着大数据技术的发展,HBase 的发展趋势主要体现在以下几个方面: 1. 与云计算深度集成 随着企业向云迁移,HBase 也正在越来越多地部署在云环境中。云服务商(如 …...

Rust 语言学习笔记(二)

再继续快速学习一下 Rust 的以下几个知识点&#xff0c;就可以开始着手做点小工具了 基本数据类型复合数据类型基本的流程控制 Rust 设计为有效使用内存考虑的&#xff0c;它提供了非常细力度的数据类型&#xff0c;如整数分为有无符号&#xff0c;宽度从 8 位到 128 位&…...

【postman】怎么通过curl看请求报什么错

获取现成的curl方式&#xff1a; 1&#xff0c;拿别人给的curl 2&#xff0c;手机app界面通过charles抓包&#xff0c;点击接口复制curl 3&#xff0c;浏览器界面-开发者工具-选中接口复制curl 拿到curl之后打开postman&#xff0c;点击import&#xff0c;粘贴curl点击send&am…...

Python 编程入门指南(一)

1. Python 简介 Python是一种广泛使用的高级编程语言,因其简洁的语法和强大的功能而备受欢迎。Python由Guido van Rossum于20世纪90年代初设计,旨在提供易于阅读和编写的代码,适合从初学者到专业开发者的各个水平。它是一种解释型语言,这意味着在编写和执行代码之间不需要…...

macOS 设置固定IP

文章目录 以太网Wifi![请添加图片描述](https://i-blog.csdnimg.cn/direct/65546e966cae4b2fa93ec9f0f87009d8.png) 基于 macOS 15.1 以太网 Wifi...

redis实现消息队列的几种方式

一、了解 众所周知&#xff0c;redis是我们日常开发过程中使用最多的非关系型数据库&#xff0c;也是消息中间件。实际上除了常用的rabbitmq、rocketmq、kafka消息队列&#xff08;大家自己下去研究吧~模式都是通用的&#xff09;&#xff0c;我们也能使用redis实现消息队列。…...

debian 系统更新升级

系统升级能够有效避免漏洞导致的损害 不过需要做好提前和后续的测试&#xff0c;避免现有运行程序的错误。 debian安装参考&#xff1a;链接 一、清理过时和不再使用的源 1.清理源 vi /etc/apt/sources.list2.在下面的文件夹下清理不需要的 cd /etc/apt/sources.list.d二、…...

STM32学习笔记-----UART的概念

在 STM32 中&#xff0c;UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;是一种常用的串行通信接口&#xff0c;广泛应用于嵌入式系统中。STM32 提供了丰富的硬件资源来支持 UART 通信&#xff0c;可以通过标准库&#xff08;STM32 HAL 或者标准外设…...

Pytest-Bdd-Playwright 系列教程(9):datatable 参数的使用

Pytest-Bdd-Playwright 系列教程&#xff08;9&#xff09;&#xff1a;datatable 参数的使用 前言一、什么是 datatable 参数&#xff1f;Gherkin 表格示例 二、datatable 参数的基本使用feature文件&#xff1a;获取用户信息并执行相关操作的使用 datatable 处理表格数据Give…...

【408】SDN重点笔记

总特征&#xff1a;数据平面&#xff08;负责转发&#xff09;与控制平面&#xff08;负责控制&#xff09;分离 控制平面&#xff1a; 由服务器和软件组成。控制平面完成转发表&#xff0c;并分发。 路由器不再需要路由选择协议&#xff0c;不再交换信息&#xff0c;只负责收到…...

云运维基础

笔记内容侵权联系删除 云审计&#xff08;CTS&#xff09; 云审计云上资源变更均可被管控&#xff0c;实时系统性记录所有人的操作&#xff0c;无需手工统计。云审计服务支持将操作记录合并&#xff0c;周期性地生成事件文件实时同步转存到OBS存储桶&#xff0c;帮助用户实现…...

基于微信小程序的平安驾校预约平台的设计与实现(源码+LW++远程调试+代码讲解等)

摘 要 互联网发展至今&#xff0c;广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#xff0c;劳动强度大&#xff0c;费时费力…...

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、什么是虚拟化&#xff1f; 答:版本很多&#xff0c;选了两个作为参考。 定义1&#xff1a;虚拟化是创造设备或者资源的虚拟版本&#xff0c;如服务器、存储设备、网络或者操作系统。 定义2&#xff1a;虚拟化是资源的逻辑表示&#xff0c;它不受物理限制的约束。 2、寄生…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...