当前位置: 首页 > 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…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

第7篇:中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...