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…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
DockerHub与私有镜像仓库在容器化中的应用与管理
哈喽,大家好,我是左手python! Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库,用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...

1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器,其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机(Virtual Host)。 1. 简介 Nginx 使用 server_name 指令来确定…...

ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...