[vue3+js]实现3d旋转效果

1. 实现效果图:

2.实现代码:

css:

<style lang="scss" scoped>.bottomContainer{width: 1200px;height: 400px;display: flex;justify-content: center;position: relative;margin:200px auto;align-items: center;// background-image: url("@/assets/image/test/rote_center_bg.png");background-size: 100% 100%;background-repeat: no-repeat;background-position: center;.bottomboxtest{position: absolute;width: 1000px;height: 1000px;background:radial-gradient(rgba(181, 214, 243, 0.5) 30%, rgb(108, 165, 230) 80%);left: 50%;margin-left: -500px;transform: rotateX(90deg);margin-top: -300px;border-radius: 50%;}.arrow-img {position: absolute;width: 22px;height: 22px;// top: calc(50% + 60px);top:calc(50% - 66px);cursor: pointer;z-index: 10;&.left {left: 40px;}&.right {right: 40px;}}.device-list-container{// position: absolute;display: flex;transform-style: preserve-3d;// transform: rotateX(-20deg);transform: rotateX(-10deg);width: 940px;height: 200px;.device-list {position: absolute;transform-origin: center center;transform-style: preserve-3d;transform: rotateY(-8deg);transition: all .8s;// margin-top: 75px;width: 940px;height: 400px;// left: 10%;left: -10px;display: flex;justify-content:center;.device-item {position: absolute;font-size: 16px;color: #FFFFFF;text-align: center;margin-top: 10px;.iconBox{width: 80px;height: 80px;margin:0 auto;// background: radial-gradient( circle, #E2F1FF,#A8D4FD);background: #A8D4FD;border-radius: 50%;border: 2px solid #E5F2FF;text-align: center;line-height: 80px;.roateIcon{color:#58A0F5;font-size: 32px;}}.groupName {color:#2E5480;font-size: 16px;margin-top:8px;}}}    }}
</style>

html:

<div class="bottomContainer"><div class="device-list-container"><div class="device-list" ref="deviceListRef"><div class="device-item" v-for="(item,index) in roteList"><div class="iconBox">test<!-- <i class="iconfont icon-baojing roateIcon"></i> --></div><p class="groupName">test</p></div><div class="bottomboxtest"></div></div></div><img class="arrow-img left" src="@/assets/image/test/arrow-left.png" @click="rotate(true)" alt=""><img class="arrow-img right" src="@/assets/image/test/arrow-right.png" @click="rotate(false)" alt=""></div>

js:

<script setup lang="ts">const roteList= ref([{},{},{},{},{},{}]);const deviceListRef = ref<HTMLDivElement>();const imgList = ref<NodeListOf<Element>>();let timer: NodeJS.Timer;let timeout: NodeJS.Timeout;let current = 2;let angle = 360 / 4;let rotateDeg = 1 ;const previewCount = roteList.value!.length;onMounted(async () => {rotate(true);})function rotate(isPlus: boolean) {imgList.value = imgList.value ?? deviceListRef.value!.querySelectorAll('.device-item');const SIZE = imgList.value!.length;current += isPlus ? 1 : -1;current = (current + SIZE) % SIZE;const index = getDisplayCard(current, Math.ceil(previewCount/2), SIZE);angle = 360/SIZE;rotateDeg -= angle * (isPlus ? 1 : -1);deviceListRef.value!.style.transform = `rotateY(${rotateDeg}deg)`;// deviceListRef.value!.style.transform = `rotateY(${rotateDeg}deg)`;imgList.value!.forEach((v: any, i: number) => {(v as HTMLDivElement).style.opacity = '0';if (index.includes(i)) {(v as HTMLDivElement).style.opacity = '1';}(v as HTMLDivElement).style.transform = `rotateY(${(i - 2) * angle}deg) translateZ(370px)`;})function getDisplayCard(current: number, num: number, size: number) {const offset = Math.trunc(num / 2);const res = [current];for (let i = 1; i <= offset; i++) {const pos1 = current + i;const pos2 = current - i < 0 ? current - i + size : current - i;res.push(pos1, pos2);}return res.map(v => v % size);}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/40499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

既美观又方便的后台框架谁需要?进来就对了。

一套既美观又方便的后台框架可以大大幅节约开发时间和成本。 我们来一起看看几个明朗大气的管理控制台页面。 本文档会持续更新 模板编号&#xff1a;翠花_001模板编号&#xff1a;翠花_002模板编号&#xff1a;翠花_003

nginx的匹配及重定向

一、nginx的匹配&#xff1a; nginx中location的优先级和匹配方式&#xff1a; 1.精确匹配&#xff1a;location / 对字符串进行完全匹配&#xff0c;必须完全符合 2.正则匹配&#xff1a;location ^~ ^~ 前缀匹配&#xff0c;以什么为开头 ~区分大小写的匹配 ~* 不区分…

IDEA:插件和配置推荐(2024版)

文章目录 一、插件1.1 主题1.2 代码缩略图1.3 Maven插件2.4 彩虹括号2.5 翻译插件2.6 图标插件2.7 MyBatis插件2.8 阿里巴巴开发规范 二、全局配置2.1 主题2.2 字符编码2.3 注释颜色2.4 自动导包2.5 鼠标控制界面大小 三、新项目设置3.1 Maven3.2 SDK 四、恢复初始化 一、插件 …

SpringBoot 多数据源配置

目录 一. 引入maven依赖包 二. 配置yml 三、创建 xml 分组文件 四、切换数据源 一. 引入maven依赖包 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.6.1&…

【Linux】Linux用户,用户组,其他人

1.文件拥有者 初次接触Linux的朋友大概会觉得很怪异&#xff0c;怎么“Linux有这么多用户&#xff0c;还分什么用户组&#xff0c;有什用呢&#xff1f;”&#xff0c;这个“用户与用户组”的功能可是相当健全而且好用的一个安全防护措施。 怎么说呢&#xff1f;由于Linux是个…

【C++】解决 C++ 语言报错:Dangling Pointer

文章目录 引言 悬挂指针&#xff08;Dangling Pointer&#xff09;是 C 编程中常见且危险的错误之一。当程序试图访问指向已释放内存的指针时&#xff0c;就会发生悬挂指针错误。这种错误不仅会导致程序崩溃&#xff0c;还可能引发不可预测的行为和安全漏洞。本文将深入探讨悬…

PDF内存如何变小,PDF内存压缩,PDF内存变小怎么调整

在数字化时代&#xff0c;pdf已成为工作、学习和生活中不可或缺的文件格式。它以其跨平台兼容性和安全性受到广大用户的喜爱。然而&#xff0c;随着pdf文件中嵌入的图片、图形和文本内容的增多&#xff0c;文件大小往往会变得相当可观&#xff0c;给文件的传输和存储带来一定的…

Spring Cloud 概述

目录 ​编辑一、认识微服务 1、单体架构 2、集群和分布式架构 3、微服务架构 二、Spring Cloud 1、什么是 Spring Cloud 2、Spring Cloud 版本 3、Spring Cloud 的实现方案 Spring Cloud Netflix ​编辑Spring Cloud Alibaba 一、认识微服务 1、单体架构 很多创业公…

【开发笔记】如何用正则匹配出百度云盘分享链接的提取码和链接?

用Wordpress做下载站&#xff0c;需要复制网盘链接到后台的文章发布自定义字段&#xff0c;然后我不想每次手动拆分链接和提取码分别到两个input&#xff0c;就想在后台粘帖时候实现拆分它。 $link 链接&#xff1a;https://pan.baidu.com/s/16y9Z5mTSE6gewStGDNndNQ 提取码…

【STM32】在标准库中使用DMA

1.MDA简介 DMA全称Direct Memory Access,直接存储区访问。 DMA传输将数据从一个地址空间复制到另一个地址空间。当CPU初始化这个传输动作&#xff0c;传输动作本身是由DMA控制器来实现和完成的。DMA传输方式无需CPU直接控制传输&#xff0c;也没有中断处理方式那样保留现场和…

融云上线 HarmonyOS NEXT 版 SDK,全面适配「纯血鸿蒙」生态

6 月 21 日&#xff0c;“2024 华为开发者大会”正式发布使用自研内核的原生鸿蒙系统 HarmonyOS NEXT&#xff0c;即 “纯血鸿蒙”。 同时&#xff0c;华为宣布开放“鸿蒙生态伙伴 SDK 市场”&#xff0c;甄选各类优质、安全的 SDK 加入聚合平台&#xff0c;助力各行业开发者轻…

【linux】网络基础(3)——tcp协议

文章目录 TCP协议概括TCP头部格式TCP连接管理建立连接&#xff08;三次握手&#xff09;数据传输确认应答机制捎带应答 滑动窗口丢包问题 拥塞控制延时应达 终止连接&#xff08;四次挥手&#xff09; TCP协议概括 TCP是一个面向连接的协议&#xff0c;在传输数据之前需要建立连…

医疗器械进销存软件 专业合规的医疗公司器械出入库管理软件

财务管理&#xff1a;财务档案统一管理&#xff0c;有利于科学管理企业资金 财务管理&#xff1a;发票关联业务单据&#xff0c;业财融合&#xff0c;加速财务数字化转型 财务管理&#xff1a;提供收付款功能&#xff0c;加快企业应收账款的回收&#xff0c;降低付款的资金浮…

小白轻松使用maven

一、maven 下载 下载地址 maven 下载官方地址 https://maven.apache.org/download.cgi&#xff0c;黄色压缩包。 2. 下载解压 cmd 解压命令 tar -zxvf apache-maven-3.9.8-bin.tar.gz二、maven 配置 settings.xml 文件配置 镜像配置&#xff1a; 国内镜像配置用于下载资源…

《操作系统真象还原》学习笔记:第1章 部署工作环境

**提示&#xff1a;**这篇文章是根据学长提供的教程《操作系统真象还原》第一章 部署工作环境来完成的&#xff0c;我按照学长给的教程一步一步做下来&#xff0c;再结合《操作系统真象还原》这本书&#xff0c;对实验环境进行了配置。以下是我按照教程进行搭建的记录&#xff…

【Ubuntu】详细说说Parallels DeskTop安装和使用Ubuntu系统

希望文章能给到你启发和灵感~ 如果觉得文章对你有帮助的话,点赞 + 关注+ 收藏 支持一下博主吧~ 阅读指南 开篇说明一、基础环境说明1.1 硬件环境1.2 软件环境二、Ubuntu系统的使用2.1 系统的下载2.2 系统的安装2.3 安装桌面版(可选)2.3.1 安装/更新apt2.3.2 安装桌面版2.3…

【JNDI注入利用工具】JNDIExploit v1.1

# 简介 JNDIExploit一款用于 JNDI注入 利用的工具&#xff0c;大量参考/引用了 Rogue JNDI 项目的代码&#xff0c;集成了JDNI注入格式&#xff0c;能够更加方便的开启服务端后直接利用&#xff0c;支持反弹Shell、命令执行、直接植入内存shell等&#xff0c;并集成了常见的by…

在Centos7上安装PostgreSQL16的详细步骤

文章目录 环境一、准备二、postgresql下载方法一&#xff1a;wget下载方法二&#xff1a;下载压缩包解压 三、创建用户组、用户四、创建数据主目录五、配置环境变量六、initdb初使化数据库七、配置服务八、设置开机自启动九、设置防火墙十、启动数据库服务 环境 CPU: 4 核心或以…

Python爬虫系列-让爬虫自己写爬虫(半自动化,代替人工写爬虫)

现在的PC、手机客户端等终端设备大量使用了网页前后端技术&#xff0c;另外主流的网站也会经常会更新&#xff0c;导致以前一个月更新一次爬虫代码&#xff0c;变成了天天需要更新代码&#xff0c;所以自动化爬虫技术在当前就显得特别重要&#xff0c;最近我也是在多次更新某个…