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

Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件

主要讲述封装一个3D轮播相册的组件,效果图如下,仅仅传入一个图片的数组即可,效果如下:

在这里插入图片描述
使用Vue3技术开发,支持传入任意张数的图片。

使用方法

<template><Swiper :list="list" />
</template><script setup>
import Swiper from '@/components/Swiper.vue'let list = ['https://gd-hbimg.huaban.com/0c89e8d8eebbd8b3168051c9c32dda927b11041544c27-7h2Nuu_fw658webp','https://gd-hbimg.huaban.com/d8ab30b96c90ef2c0428376d1df6e86df379ddc33b598-XfLbgw_fw658webp','https://gd-hbimg.huaban.com/617a23ff457a8e7f403560601ee1986f0be521ce31262-yudWdl_fw658webp','https://gd-hbimg.huaban.com/02381538312ca44802a7fb6140fdf79711d046d01e256-bGN4Hq_fw658webp','https://gd-hbimg.huaban.com/2f625b869a53f799fdaf79c20ca7e0d96277767b39594-OQN9F9_fw658webp',
]
</script>

swiper组件

<template><section><div class="green-circle"><div class="pink-circle"><imgclass="bottom-circle"src="https://gd-hbimg.huaban.com/1784343fe17d90f4de4bccf96594d0965c616f5947463-umfPH3_fw658webp"alt=""/></div></div><div class="swiper-box" id="swiperBox"><divv-for="(item, index) in list":key="'img-' + index"class="loop-item":style="{transform: `translate(-50%, -50%) rotate(${(360 / list.length) * index}deg) translateY(-17.5vh) rotateX(90deg)`,}"><img class="alarm-img" :src="item" /></div></div></section>
</template><script setup>
const props = defineProps({list: {type: Array,default: () => [],},
})
</script><style lang="scss" scoped>
section {width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;.green-circle {margin-top: 126px;position: absolute;display: flex;align-items: center;justify-content: center;width: 800px;height: 800px;transform-style: preserve-3d;transform: rotateX(60deg) rotate(18deg);background-color: #aee6b4;box-shadow: 19px 48px 27px #c5e3dd;border-radius: 50%;.pink-circle {display: flex;align-items: center;justify-content: center;width: 300px;height: 300px;background-color: rgba(255, 9, 9, 0.6);border-radius: 50%;box-shadow: 2px 2px 30px #c82d2d;.bottom-circle {width: 300px;object-fit: contain;}}}.swiper-box {position: relative;z-index: 200;width: 100%;transform-style: preserve-3d;animation: three-dimensions-circle 30s linear infinite;.loop-item {object-fit: cover;position: absolute;top: 50%;left: 50%;cursor: pointer;text-align: center;.loop-name {font-size: 14px;color: #ffffff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}img,.alarm-img {margin-top: 4px;width: 150px;height: 9.2vh;}}}
}@keyframes three-dimensions-circle {0% {transform: rotateX(-108deg) rotate(0);}100% {transform: rotateX(-108deg) rotate(-360deg);}
}
</style>

1. 大致思路
通过 :style=“{transform: translate(-50%, -50%) rotate(${(360 / list.length) * index}deg) translateY(-17.5vh) rotateX(90deg)}” 来先实现静态的图片摆放,然后通过旋转 swiper-box 来达到整体旋转的效果。
通过 360 / list.length 来计算出每张图片的左右间距,以保证占满一个圈。

2. 3D效果
3D效果主要通过 css3 的 transform-style: preserve-3d; 配合 transform: rotate; 来实现

相关文章:

Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件

主要讲述封装一个3D轮播相册的组件&#xff0c;效果图如下&#xff0c;仅仅传入一个图片的数组即可&#xff0c;效果如下&#xff1a; 使用Vue3技术开发&#xff0c;支持传入任意张数的图片。 使用方法 <template><Swiper :list"list" /> </templat…...

LeetCode 力扣 热题 100道(十五)搜索插入位置(C++)

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 代码如下所示&#xff1a; class Solution { public:int searchIns…...

【035】基于51单片机俄罗斯方块游戏机【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成&#xff1a;51单片机最小系统LCD12864液晶显示按键控制。 1、设计采用STC89C52、AT89C52、AT89S52作为主控芯片&#xff0c;采用LCD12864液晶作为显示&#xff0c;大屏显示就是刺激&#xff1b; 2、游戏设置十个关卡&#xff0c;每个关卡累计99分即可进入下…...

NAT traversal 原理 | TCP / UDP/ P2P

注&#xff1a;本文为 “NAT traversal ”相关的几篇文章合辑。 未整理去重。 NAT 穿越技术原理 Li_yy123 于 2020-12-08 18:54:26 发布 一、NAT 由来 为了解决全球公有 IPv4 的稀缺&#xff0c;提出了 NAT 技术。NAT 是 Network Address Translation 网络地址转换的缩写。 …...

如何成长为一名工程技术经理

https://medium.com/srivatsan-sridharan/how-to-grow-as-an-engineering-manager-687cad0bcac7 作为一名工程技术经理&#xff0c;你可能已经积累了丰富的团队管理经验&#xff0c;并展示了出色的项目管理、优先级管理和员工指导能力。然而&#xff0c;尽管如此&#xff0c;你…...

GEE开发之下载海拔、坡度、坡向数据

GEE开发之加载海拔、坡度、坡向数据 方法一&#xff1a;加载elevation、slope、aspect和hillshade数据方法二&#xff1a;加载elevation、slope、aspect数据 前言&#xff1a;根据矢量图加载海拔、坡度、坡向和山体阴影。 方法一&#xff1a;加载elevation、slope、aspect和hil…...

gozero项目迁移与新服务器环境配置,包含服务器安装包括go版本,Nginx,项目配置包括Mysql,redis,rabbit,域名

迁移 **GoZero** 项目到新服务器并配置相关环境涉及多个步骤。以下是一个系统化的指南&#xff0c;涵盖服务器环境安装、数据库和缓存配置、项目部署以及域名绑定。 ### 步骤概述 1. **服务器环境配置** - 安装 Go 语言环境 - 安装 Nginx - 安装 MySQL 和 Redis -…...

Scala正则表达式全面教程

一、正则表达式概述 正则表达式&#xff08;Regular Expression&#xff0c;简称RegEx&#xff09;是一种用于字符串搜索和操作的强大工具&#xff0c;它使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在Scala中&#xff0c;正则表达式通过scala.util.matching.…...

伺服电机为什么会变慢?

在现代工业自动化和控制系统中&#xff0c;伺服电机因其高效性和精确的控制能力而被广泛应用于各类机器和设备。然而&#xff0c;在实际使用中&#xff0c;有时用户会发现伺服电机的运行速度出现了下降的现象。这一变化不仅会影响生产效率&#xff0c;还可能对设备的安全性和可…...

61 基于单片机的小车雷达避障及阈值可调

所有仿真详情导航&#xff1a; PROTEUS专栏说明-CSDN博客 目录 一、主要功能 二、硬件资源 三、主程序编程 四、资源下载 一、主要功能 基于51单片机&#xff0c;采用超声波传感器检测距离&#xff0c;通过LCD1602显示屏显示&#xff0c;三个按键&#xff0c;第一个按键是…...

微信小程序之手机归属地查询

微信小程序之手机归属地查询 需求描述 API申请和小程序设置 API申请 第一步&#xff1a;完整账号注册 我们需要来到如下网站&#xff0c;注册账号&#xff1a;万维易源 第二步&#xff1a;账号注册完成以后&#xff0c;点击右上角的控制台信息。 第三步&#xff1a;在控制…...

ElementUI 问题清单

1、form 下面只有一个 input 时回车键刷新页面 原因是触发了表单默认的提交行为&#xff0c;给el-form 加上submit.native.prevent就行了。 <el-form inline submit.native.prevent><el-form-item label"订单号"><el-inputv-model"query.order…...

DVWA靶场——XSS(Stored)

一&#xff0c;Stored XSS 漏洞详解 存储型跨站脚本攻击&#xff08;Stored XSS&#xff0c;或称为 Persistent XSS&#xff09; 是一种常见的跨站脚本攻击&#xff08;XSS&#xff09;类型&#xff0c;它通过将恶意脚本&#xff08;通常是 JavaScript 代码&#xff09;直接存储…...

Spring框架中的Bean是线程安全的吗?

概述 在Java开发中&#xff0c;Spring框架是一个广泛使用的轻量级控制反转&#xff08;IoC&#xff09;和面向切面&#xff08;AOP&#xff09;容器框架。它简化了企业级应用的开发&#xff0c;提供了丰富的功能&#xff0c;如依赖注入、事务管理、消息传递等。在Spring框架中…...

uniapp远程摄像头流界面上显示

用到的插件&#xff1a;dplayer、hls dplayer官网&#xff1a;dplayer dplayer官网npm安装的是最新版本&#xff08;1.27.1&#xff09;&#xff0c;真机运行异常了&#xff0c;可以安装历史版本 dplayer历史版本 远程摄像头视频流格式&#xff1a;m3u8 可以用来测试的视频流&a…...

elasticSearch(一):elasticSearch介绍

一、搜索引擎 搜索引擎的核心目的是帮助用户以最小的成本才海量数据中找到最想要的结果。糟糕的搜索引擎往往会所问非所答&#xff0c;用户查了半天也得不到自己想要的&#xff0c;好的搜索引擎往往第一页就是用户最想要的结果。而目前判断搜索引擎好坏一般是从召回率、精确率…...

基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收!

基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收&#xff01; COLING&#xff0c;国际计算语言学会议&#xff08;International Conference on Computational Linguistics&#xff09;&#xff0c;是自然语言处理和计算语言学领域的顶级国际会议&#xff08;CCF 推…...

输出九九乘法表:JAVA

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 输出九九乘法表。 具体的输出格式见样例&#xff0c;其中每一项乘法的结果需要占据2个字符宽度&#xff0c;不同的乘法结果之间用1个空格间隔。 举例&#xff1a; 1*4_4_2*4_8_3*412_4*416 上…...

kube-proxy的iptables工作模式分析

系列文章目录 iptables基础知识 文章目录 系列文章目录前言一、kube-proxy介绍1、kube-proxy三种工作模式2、iptables中k8s相关的链 二、kube-proxy的iptables模式剖析1.集群内部通过clusterIP访问到pod的流程1.1.流程分析 2.从外部访问内部service clusterIP后端pod的流程2.1…...

xiaolin coding 图解 MySQL笔记——锁篇

1. 全局锁是怎么用的&#xff1f; flush tables with read lock 执行以后&#xff0c;整个数据库就处于只读状态了&#xff0c;这时其他线程执行对数据的增删改操作&#xff08;insert、delete、update&#xff09;&#xff1b;对表结构的更改操作&#xff08;alter table、dr…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

质量体系的重要

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

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...