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轮播相册的组件,效果图如下,仅仅传入一个图片的数组即可,效果如下: 使用Vue3技术开发,支持传入任意张数的图片。 使用方法 <template><Swiper :list"list" /> </templat…...
LeetCode 力扣 热题 100道(十五)搜索插入位置(C++)
给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 代码如下所示: class Solution { public:int searchIns…...
【035】基于51单片机俄罗斯方块游戏机【Proteus仿真+Keil程序+报告+原理图】
☆、设计硬件组成:51单片机最小系统LCD12864液晶显示按键控制。 1、设计采用STC89C52、AT89C52、AT89S52作为主控芯片,采用LCD12864液晶作为显示,大屏显示就是刺激; 2、游戏设置十个关卡,每个关卡累计99分即可进入下…...
NAT traversal 原理 | TCP / UDP/ P2P
注:本文为 “NAT traversal ”相关的几篇文章合辑。 未整理去重。 NAT 穿越技术原理 Li_yy123 于 2020-12-08 18:54:26 发布 一、NAT 由来 为了解决全球公有 IPv4 的稀缺,提出了 NAT 技术。NAT 是 Network Address Translation 网络地址转换的缩写。 …...
如何成长为一名工程技术经理
https://medium.com/srivatsan-sridharan/how-to-grow-as-an-engineering-manager-687cad0bcac7 作为一名工程技术经理,你可能已经积累了丰富的团队管理经验,并展示了出色的项目管理、优先级管理和员工指导能力。然而,尽管如此,你…...
GEE开发之下载海拔、坡度、坡向数据
GEE开发之加载海拔、坡度、坡向数据 方法一:加载elevation、slope、aspect和hillshade数据方法二:加载elevation、slope、aspect数据 前言:根据矢量图加载海拔、坡度、坡向和山体阴影。 方法一:加载elevation、slope、aspect和hil…...
gozero项目迁移与新服务器环境配置,包含服务器安装包括go版本,Nginx,项目配置包括Mysql,redis,rabbit,域名
迁移 **GoZero** 项目到新服务器并配置相关环境涉及多个步骤。以下是一个系统化的指南,涵盖服务器环境安装、数据库和缓存配置、项目部署以及域名绑定。 ### 步骤概述 1. **服务器环境配置** - 安装 Go 语言环境 - 安装 Nginx - 安装 MySQL 和 Redis -…...
Scala正则表达式全面教程
一、正则表达式概述 正则表达式(Regular Expression,简称RegEx)是一种用于字符串搜索和操作的强大工具,它使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在Scala中,正则表达式通过scala.util.matching.…...
伺服电机为什么会变慢?
在现代工业自动化和控制系统中,伺服电机因其高效性和精确的控制能力而被广泛应用于各类机器和设备。然而,在实际使用中,有时用户会发现伺服电机的运行速度出现了下降的现象。这一变化不仅会影响生产效率,还可能对设备的安全性和可…...
61 基于单片机的小车雷达避障及阈值可调
所有仿真详情导航: PROTEUS专栏说明-CSDN博客 目录 一、主要功能 二、硬件资源 三、主程序编程 四、资源下载 一、主要功能 基于51单片机,采用超声波传感器检测距离,通过LCD1602显示屏显示,三个按键,第一个按键是…...
微信小程序之手机归属地查询
微信小程序之手机归属地查询 需求描述 API申请和小程序设置 API申请 第一步:完整账号注册 我们需要来到如下网站,注册账号:万维易源 第二步:账号注册完成以后,点击右上角的控制台信息。 第三步:在控制…...
ElementUI 问题清单
1、form 下面只有一个 input 时回车键刷新页面 原因是触发了表单默认的提交行为,给el-form 加上submit.native.prevent就行了。 <el-form inline submit.native.prevent><el-form-item label"订单号"><el-inputv-model"query.order…...
DVWA靶场——XSS(Stored)
一,Stored XSS 漏洞详解 存储型跨站脚本攻击(Stored XSS,或称为 Persistent XSS) 是一种常见的跨站脚本攻击(XSS)类型,它通过将恶意脚本(通常是 JavaScript 代码)直接存储…...
Spring框架中的Bean是线程安全的吗?
概述 在Java开发中,Spring框架是一个广泛使用的轻量级控制反转(IoC)和面向切面(AOP)容器框架。它简化了企业级应用的开发,提供了丰富的功能,如依赖注入、事务管理、消息传递等。在Spring框架中…...
uniapp远程摄像头流界面上显示
用到的插件:dplayer、hls dplayer官网:dplayer dplayer官网npm安装的是最新版本(1.27.1),真机运行异常了,可以安装历史版本 dplayer历史版本 远程摄像头视频流格式:m3u8 可以用来测试的视频流&a…...
elasticSearch(一):elasticSearch介绍
一、搜索引擎 搜索引擎的核心目的是帮助用户以最小的成本才海量数据中找到最想要的结果。糟糕的搜索引擎往往会所问非所答,用户查了半天也得不到自己想要的,好的搜索引擎往往第一页就是用户最想要的结果。而目前判断搜索引擎好坏一般是从召回率、精确率…...
基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收!
基于 RWKV 的视觉语言模型 VisualRWKV 被 COLING 2025 接收! COLING,国际计算语言学会议(International Conference on Computational Linguistics),是自然语言处理和计算语言学领域的顶级国际会议(CCF 推…...
输出九九乘法表:JAVA
链接:登录—专业IT笔试面试备考平台_牛客网 来源:牛客网 输出九九乘法表。 具体的输出格式见样例,其中每一项乘法的结果需要占据2个字符宽度,不同的乘法结果之间用1个空格间隔。 举例: 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. 全局锁是怎么用的? flush tables with read lock 执行以后,整个数据库就处于只读状态了,这时其他线程执行对数据的增删改操作(insert、delete、update);对表结构的更改操作(alter table、dr…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
基础测试工具使用经验
背景 vtune,perf, nsight system等基础测试工具,都是用过的,但是没有记录,都逐渐忘了。所以写这篇博客总结记录一下,只要以后发现新的用法,就记得来编辑补充一下 perf 比较基础的用法: 先改这…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
【C++进阶篇】智能指针
C内存管理终极指南:智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...
