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

vue CSS 自定义宽高翻页剥离效果

news 来源：原创 2025/5/24 20:11:45

新增需求，客户需要类似PPT的剥离效果用于WEB页面翻页，查找资料后，参考下方的掘金博主的文章，并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量，样式style中的属性与宽高的关系整理成了公式进行动态计算。

宽高比例建议不超过2倍，否则样式就会有问题。如果有极限值出现的情况，建议把rotateBox的border显示，进行调整时各个div之间的关系看得更清晰。

【完整代码】

<template><div class="container"><article><div class="book"><div class="rotateBox" :style="rotateBoxStyles"><div class="pageItem front" :style="[pageItemStyles,frontStyle]"><figure><img src="https://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg" alt=""><figcaption>Page 1</figcaption></figure></div><div class="pageItem back" :style="[pageItemStyles, backStyle]"><figure><img src="https://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg" alt=""><figcaption>Page 2</figcaption></figure></div></div><div class="pageItem" :style="pageItemStyles"><figure><img src="https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg" alt=""><figcaption>Page 3</figcaption></figure></div></div></article></div>
</template><script>
export default {data() {return {pageWidth: 400,pageHeight: 200,}},computed: {pageItemStyles() {return {width: this.pageWidth + 'px',height: this.pageHeight + 'px',}},rotateBoxStyles() {return {width: this.pageWidth * 2 + this.pageHeight * 0.5 + 'px',height: this.pageWidth * 2 + this.pageHeight * 0.5 + 'px',bottom: -this.pageWidth * 2 + 'px',transformOrigin: '0 ' + (this.pageWidth * 2 + this.pageHeight * 0.5) + 'px',transform: 'rotate(-'+ Math.atan((2*this.pageWidth - this.pageHeight)/this.pageWidth)* (180 / Math.PI) +'deg)',}},frontStyle() {return {bottom: (2*this.pageWidth - this.pageHeight) + 'px',// bottom: 0.5*(this.pageWidth * 2 + this.pageHeight * 0.5) + 'px',// bottom: this.pageHeight * 0.5+ 'px',transformOrigin: '0 ' + (this.pageWidth * 2) + 'px',transform: 'rotate('+ Math.atan((2*this.pageWidth - this.pageHeight)/this.pageWidth)* (180 / Math.PI) +'deg)',}},backStyle() {return {bottom: (2*this.pageWidth - this.pageHeight) + 'px',// bottom: 0.5*(this.pageWidth * 2 + this.pageHeight * 0.5) + 'px',// bottom: this.pageHeight * 0.5+ 'px',left: - this.pageWidth + 'px',transformOrigin: this.pageWidth + 'px' +' ' + (this.pageWidth * 2) + 'px',transform: 'rotate('+ (180 - Math.atan((2*this.pageWidth - this.pageHeight)/this.pageWidth)* (180 / Math.PI)) +'deg)',}},},
}</script><style scoped lang="less">
.container {position: relative;margin-top: 100px;
}.book {background-color: cornflowerblue;position: relative;
}article {position: relative;width: 500px;height: 400px;// padding: 40px 80px 40px 380px;margin: auto;// box-shadow: 2px 3px 5px 6px #3f1300;// background-image: url(https://cdn.pixabay.com/photo/2016/12/18/09/05/trees-1915245_1280.jpg);
}.pageItem {position: absolute;overflow: hidden;// width: 500px;  // w// height: 400px; // hfont-size: 32px;text-align: center;box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}.rotateBox {overflow: hidden;position: absolute;z-index: 10;// width: 1200px;  // 2w+0.5h// height: 1200px; // 2w+0.5h// bottom: -1000px; // -2w// transform-origin: 0px 1200px;  // 0 2w+0.5hborder: 1px dashed #b0b0b0;//transform: rotate(-50.19deg); // -arctan((2w-h)/w)transition: 1s;// background: pink;
}.front {// bottom: 600px; // 2w-h// transform-origin: 0 1000px; // 0 2w// transform: rotate(50.19deg); // arctan((2w-h)/w)transition: 1s;
}.back {// bottom: 600px; // 2w-h// left: -500px; // -w// transform-origin: 500px 1000px; // w 2w// transform: rotate(129.81deg); // 180 - arctan((2w-h)/w)transition: 1s;
}figure img {width: 100%;height: 100%;aspect-ratio: 3/4;object-fit: cover;
}figure figcaption {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-wrap: nowrap;color: #fff;background-color: rgba(255, 255, 255, .5);padding: 1em;border: 4px double #fff;
}article:hover .rotateBox {transform: rotate(-90deg) !important;
}article:hover .front {transform: rotate(90deg) !important;
}article:hover .back {transform: rotate(90deg) !important;
}
</style>

【参考文章】

CSS实现翻页效果

vue CSS 自定义宽高翻页剥离效果

新增需求，客户需要类似PPT的剥离效果用于WEB页面翻页，查找资料后，参考下方的掘金博主的文章，并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量，样式style中的属性与宽高的关系整理成了公式进行动态计算。 …...

编程日记 2025/5/24 20:11:45

函数：参数与返回值类型

本文我们将深入探讨函数的参数和返回值类型，这是 TypeScript 中最常用的特性之一。了解如何为函数参数和返回值添加类型，不仅能帮助你避免常见的错误，还能提高代码的可读性和可维护性。在 JavaScript 中，函数的参数和返回值是没…...

编程日记 2025/5/21 6:45:58

【学习总结|DAY022】Java网络编程

网络编程是Java开发中非常重要的一环，它允许程序与网络上的其他设备进行数据交互。本文将介绍Java网络编程的基础知识，包括网络编程三要素、UDP和TCP通信协议，以及BS架构的原理。网络编程三要素网络通信至少需要三个要素：IP地…...

编程日记 2025/5/24 19:59:31

帝国cms同一条信息使用不同的多个内容页模板伪静态实现教程

理论上可以实现一条信息使用无数个内容页模板，实现过程： 1、/e/action目录下新建bishun.php，内容如下： <?php require(../class/connect.php); require(../class/db_sql.php); require(../class/functions.php); require(..…...

编程日记 2025/5/24 13:33:34

解决Linux＜云服务器＞访问HuggingFace的问题（操作记录）

一、准备配置文件 cache.db clash config.yaml Country.mmdb（1）cache.db、clash的获取链接：百度网盘提取码：82t0 （2）config.yaml、Country.mmdb的获取启动本地已安装的clash软件→找到“配置订阅”…...

编程日记 2025/5/24 19:43:10

selenium 报错 invalid argument: invalid locator

环境： Python3.12.2 selenium4.0 报错信息： invalid argument: invalid locator 错误分析： selenium语法错误,find_element方法少写By.XPATH参数错误语法如下： driver.find_element(//div[id"myid"]) 解决办…...

编程日记 2025/3/15 4:30:30

springboot——登录认证（包括jwt技术、拦截器过滤器）

实现登录的原理用户名和密码都输入正确，登录成功，否则，登录失败登录功能的本质：查询，根据用户名和密码查询员工信息实现登录的步骤登录需要确定用户的id、username、name、token（用于身份校验），对此要重新定义一个类LoginInfo public class LoginInfo {priva…...

编程日记 2025/5/24 19:51:18

【IN、NOT、AND、OR】在 MySql 中的使用方法，使用场景、注意事项

目录 IN NOT AND OR 注意事项： 使用场景： IN 用于指定某个字段的值在一个预定义的列表中。 SELECT * FROM users WHERE age IN (20, 25, 30);查询返回 age 字段是20、25 、30 的用户记录。 NOT 用于对条件进行否定。查询将返回与指定条件相…...

编程日记 2025/5/24 20:08:27

html ＜a＞设置发送邮件链接、打电话链接＜a href=“mailto:＞＜/a＞＜a href=“tel:＞＜/a＞

1.代码 <ul><li>电话：<a href"tel:18888888888">188-8888-8888</a></li><li>邮箱：<a href"mailto:10000qq.com">10000qq.com</a></li><li>邮箱：<a hre…...

编程日记 2025/5/24 19:56:19

Mac上详细配置java开发环境和软件(更新中)

文章目录概要JDK的配置JDK下载安装配置JDK环境变量文件 Idea的安装Mysql安装和配置Navicat Premium16.1安装安装Vscode安装和配置Maven配置本地仓库配置阿里云私服Idea集成Maven Cpolar快速入门概要这里使用的是M3型片 14.6版本的Mac 用到的资源放在网盘链接: https://pan…...

编程日记 2025/5/24 8:37:09

游戏渠道假量解决方案

某推广公司在推广过程中被查出“短期内点击量激增”“存在同一地址多次访问”“已注册用户重复注册”等数据作弊行为，法院判罚退还服务费200余万元，并赔偿违约金约350万元。某公司为提升其游戏在应用商店榜单排名，委托某网络公司进行下载、注…...

编程日记 2025/5/23 14:53:17

Java重要面试名词整理（二）：SpringMyBatis

文章目录 Spring篇Spring核心推断构造方法AOP动态代理Advice的分类Advisor的理解AOP相关的概念定义BeanASM技术JFR依赖注入循环依赖LifecycleSpring AOT Spring事务Spring事务传播机制Spring事务传播机制是如何实现的呢?Spring事务传播机制分类 SpringMVCHandlerHandlerMappi…...

编程日记 2025/5/20 18:16:50

powershell美化

powershell美化写在前面除了安装命令，其他都是测试命令，后续再写进配置文件安装主题控件安装主题oh-my-posh，powershell中执行 winget install JanDeDobbeleer.OhMyPosh -s winget oh-my-posh init pwsh | Invoke-Expression # 查看…...

编程日记 2025/5/20 1:58:14

D102【python 接口自动化学习】- pytest进阶之fixture用法

day102 pytest的usefixtures方法学习日期：20241219 学习目标：pytest基础用法 -- pytest的usefixtures方法学习笔记： fixture调用方法实际应用总结 pytest.mark.usefixtures(func)，pytest的usefixtures方法，无…...

编程日记 2025/5/24 10:53:13

Excel生成DBC脚本源文件

Excel制作新建一个Excel，后缀为“.xls” 工作本名称改为“CAN_Matrix” 在首行按照列来起名字，在里面只需要填写必须的内容即可。列数名称第0列Message Name第1列Message Format第2列Message ID第3列Message Length (byte)第4列Message Transmitte…...

编程日记 2025/5/20 10:26:15

【Leetcode 每日一题】2545. 根据第 K 场考试的分数排序

问题背景班里有 m m m 位学生，共计划组织 n n n 场考试。给你一个下标从 0 0 0 开始、大小为 m n m \times n mn 的整数矩阵 s c o r e score score，其中每一行对应一位学生，而 s c o r e [ i ] [ j ] score[i][j] score[i][j] 表示…...

编程日记 2025/5/21 6:31:16

Spring MVC(上)

上一篇博客的补充: 一般出现这种问题,我们就要检查版本了我们需要查看这几个地方是否版本是对的注意: jdk版本运行取决于什么? 1.通过cmd运行,jdk版本就是你设置的环境变量 2.通过Idea运行,取决于该项目设置的JDK版本创建项目的方式: 1> 我们上个博客用idea进行创建 2…...

编程日记 2025/5/23 21:02:42

【优选算法---归并排序衍生题目】剑指offer51---数组中的逆序对、计算右侧小于当前元素的个数、翻转对

一、剑指offer51---数组中的逆序对题目链接: LCR 170. 交易逆序对的总数 - 力扣（LeetCode） 题目介绍： 在数组中的两个数字，如果前面⼀个数字大于后面的数字，则这两个数字组成⼀个逆序对。输入一个数组&#xff0c…...

编程日记 2025/5/24 5:00:44

单体到微服务：电商平台架构的演变与可扩展性探索

目录一、整体理解可扩展性二、从电商平台架构发展看架构的可扩展性 （一）单体架构 （二）分布式架构 （三）SOA架构 （四）微服务架构三、1号店App服务端架构升级说明 &#xff…...

编程日记 2025/5/19 18:04:23

clickhouse-副本和分片

1、副本 1.1、概述集群是副本和分片的基础，它将ClickHouse的服务拓扑由单节点延伸到多个节点，但它并不像Hadoop生态的某些系统那样，要求所有节点组成一个单一的大集群。ClickHouse的集群配置非常灵活，用户既可以将所有节点组成…...

编程日记 2025/5/19 5:50:56

C语言版解法力扣题：将整数按权重排序

1.题目描述我们将整数 x 的权重定义为按照下述规则将 x 变成 1 所需要的步数： 如果 x 是偶数，那么 x x / 2 如果 x 是奇数，那么 x 3 * x 1 比方说，x3 的权重为 7 。因为 3 需要 7 步变成 1 （3 --> 10 -->…...

编程日记 2025/5/2 20:22:57

为了使用qt6，在ubuntu18.04上各种折腾失败，无奈只能升级到ubuntu20.04, 按照网上的教程没成功。自己摸索了 lsb_release -a df -h sudo apt update sudo apt upgrade -y sudo apt dist-upgrade -y sudo apt autoremove -y sudo apt clean sudo apt inst…...

编程日记 2025/5/20 0:19:52

【我的 PWN 学习手札】IO_FILE 之 stdin任意地址写

我们知道，stdin会往“缓冲区”先读入数据，如果我们劫持这个所谓“缓冲区”到其他地址呢？是否可以读入数据到任意地址？答案是肯定的。注意！代码中的“-------”分隔，是为了区分一条调用链上不同代码片段&am…...

编程日记 2025/5/24 7:30:16

＜mutex＞注释 11：重新思考与猜测、补充锁的睡眠与唤醒机制，结合 linux0.11 操作系统代码的辅助（上）

（46）问题的起源： 因为上面的内核代码，我们编写多线程代码时，对手里的家伙事不那么自信。但我们知道，多线程在竞争锁时，若得不到锁，会进入睡眠，并会在被唤醒后重新尝试得…...

编程日记 2025/5/23 1:03:09

C/C++圣诞树

系列文章序号直达链接1C/C爱心代码2C/C跳动的爱心3C/C李峋同款跳动的爱心代码4C/C满屏飘字表白代码5C/C大雪纷飞代码6C/C烟花代码7C/C黑客帝国同款字母雨8C/C樱花树代码9C/C奥特曼代码10C/C精美圣诞树11C/C俄罗斯方块12C/C贪吃蛇13C/C孤单又灿烂的神-鬼怪14C/C闪烁的爱心15C…...

编程日记 2025/5/22 10:21:29

upload-labs-master第21关超详细教程

目录环境配置解题思路利用漏洞操作演示环境配置需要的东西 phpstudy-2018 链接： phpstudy-2018 提取码：0278 32 位 vc 9 和 11 运行库链接： 运行库提取码：0278 upload-labs-master 靶场链接： upload-lasb-ma…...

编程日记 2025/5/19 0:30:04

Python基础——数学运算

目录 1. 算术运算符 2. 比较运算符 3. 赋值运算符 4. 逻辑运算符 5. 成员运算符 6. 身份运算符 7. 三目运算符 Python数学计算通过多种运算符来执行，常用的运算符类型包括算术运算符、比较运算符、赋值运算符、逻辑运算符、成员运算符、身份运算符、三目…...

编程日记 2025/5/24 5:17:27

ubuntu 安装更新 ollama新版本

ubuntu 安装更新 ollama新版本我这里是 2024-12-18 ollama 版本是 0.5.3 1手动下载 ollama-linux-amd64.tgz https://github.com/ollama/ollama/releases 2下载脚本 https://ollama.com/install.sh install.sh 和 ollama-linux-amd64.tgz 在相同路径下修改：…...

编程日记 2025/5/19 17:20:07

汽车IVI中控开发入门及进阶（45）：凌阳科技车载娱乐芯片

概述： Sunplus科技有限公司成立于1990年，是一家领先的多媒体和汽车应用芯片提供商，如DVD播放器、便携式DVD播放器、家庭娱乐音频产品、汽车信息娱乐和高级驾驶辅助系统（ADAS）。与此同时，凌阳正在为消费类、便携式和连接设备上的广泛应用提供高速I/O IP、高性能数据转换I…...

编程日记 2025/5/23 23:54:16

Linux export命令

本文来自智谱清言 --------- 在Linux系统中，export 是一个用来设置环境变量的命令。环境变量是操作系统运行时用于存储有关系统环境的信息的变量，它们对于用户和程序都是可访问的。下面是关于 export 命令的一些基本用法： 基本语法 ba…...

编程日记 2025/5/23 8:07:18

AI自我进化的新篇章：谷歌DeepMind推出苏格拉底式学习，语言游戏解锁无限潜能

各位AI爱好者、技术研究者，大家好！今天我们来聊聊一个令人兴奋的AI研究新进展——谷歌DeepMind推出的“苏格拉底式学习”方法。这项研究的独特之处在于，它让AI在没有外部数据的情况下，通过“语言游戏”实现自我进化，这…...

编程日记 2025/5/22 10:18:15

【BUG】记一次context canceled的报错

文章目录案例分析gorm源码解读gin context 生命周期context什么时候cancel的什么时候context会被动cancel掉呢？ 野生协程如何处理案例分析报错信息 {"L":"ERROR","T":"2024-12-17T11:11:33.0050800","file"…...

编程日记 2025/5/20 6:00:41

JAVA前端开发中type=“danger“和 type=“text“的区别

在前端开发中，type 属性通常用于指定按钮或其他元素的样式或行为。不同的框架和库可能对 type 属性有不同的定义和用法。常见的框架包括 Bootstrap、Ant Design（antd）、Element Plus 等。下面我将分别介绍在这些框架中 type"danger"…...

编程日记 2025/5/23 17:53:09

sqlite3 支持位运算和view和 triger

数据设置条件以后可以.根据门限自动调整其他的值由数据库记录修改时间,及记录-> 网元设备的告警产生时间,设置超时清除时间,记录系统的原始时间戳 CPp 有 sqlite 支持 json 导出字符串,json 库将字符串,映射为结构体 triger update table 更新到一个可设置参数列表 ,view …...

编程日记 2025/5/23 23:52:52

Mysql复习（一）

数据库系统的核心是（ 数据库管理系统 ）。以下的标识符中符合标识符命名规则的有几个?（3个） 3abc7, abc73, bc73a, c73ab,*73abc 标识符的第一个字符允许包括哪些符号?（ _ 或者或者 #） 关系表达式运算的…...

编程日记 2025/5/22 21:55:22

Redis bitmaps 使用

应用场景： 记录id为 1 的用户，2024年12月签到情况，并统计； 记录 1号签到 zxys-redis:0>setbit 1:202412 1 1 记录 2号签到 zxys-redis:0>setbit 1:202412 2 1 记录 3号未签到 zxys-redis:0>setbit 1:202412 3 0 …...

编程日记 2025/5/24 6:14:54

计算无人机俯拍图像的地面采样距离（GSD）矩阵

引言在无人机遥感、测绘和精细农业等领域，地面采样距离（Ground Sampling Distance，简称 GSD）是一个非常重要的指标。GSD 是指图像中每个像素在地面上实际代表的物理距离，通常以米或厘米为单位。GSD 决定了图像的空间…...

编程日记 2025/5/19 15:02:41

Java基础 | 数据库的命名规范

数据库的命名规范 1. 基本原则2. 命名规范详解2.1 命名禁止项2.2 命名规范3. 通用字段规范4. 特殊表命名建议 1. 基本原则统一性：全库采用一致的命名规范简洁性：在表达清晰的前提下尽量简短规范性：遵循数据库标准规范可读性：命名…...

编程日记 2025/5/19 20:10:42

计算机网络基础(2):网络安全/ 网络通信介质

1. 网络安全威胁网络安全：目的就是要让网络入侵者进不了网络系统，及时强行攻入网络，也拿不走信息，改不了数据，看不懂信息。事发后能审查追踪到破坏者，让破坏者跑不掉。网络威胁来自多方面&#xff1a…...

编程日记 2025/5/20 23:02:20

Reactor

文章目录正确的理解发送double free问题 1.把我们的reactor进行拆分2.链接管理3.Reactor的理论 listensock只需要设置_recv_cb，而其他sock，读，写，异常所以今天写nullptr其实就不太对，添加为空就没办法去响应事件获…...

编程日记 2025/5/22 0:20:28

介绍 Html 和 Html 5 的关系与区别

HTML（HyperText Markup Language）是构建网页的标准标记语言，而 HTML5 是 HTML 的最新版本，包含了一些新的功能、元素、API 和属性。HTML5 相对于早期版本的 HTML（比如 HTML4）有许多重要的改进和变化。以下是…...

编程日记 2025/5/24 8:48:55

已有 containerd 的情况下部署二进制 docker 共存

文章目录 [toc]学习目的开始学习dockerd启动 containerd准备配置文件启动 containerd 启动 docker准备配置文件启动 docker 环境验证停止 docker 和 containerd 学习目的使用容器的方式做一些部署的交付，相对方便很多，不需要担心别人的环境缺少需要的依…...

编程日记 2025/5/20 8:34:33

Springboot @Transactional使用时需注意的几个问题

一、事务的隔离级别在Springboot应用中，如果我们想实现方法一旦执行有异常产生，就触发事务回滚，可以在方法上面添加Transactional注解。如果应用采用mysql数据库，虽然mysql本身也有事务隔离机制，但在Sping数据库的应…...

编程日记 2025/5/19 18:37:38

西游记战力排名、笔记等

文章目录战力排名对西游记的理解各个版本游戏题材西游记关卡和妖怪西游记家喻户晓，没有谁不知道吧，无论是电视剧、影视，还是小说，乃至游戏，很多地方都有西游记的身影。虽然知道，但总不如对三国啊、水浒啊…...

编程日记 2025/5/18 23:25:19

（2024.12）Ubuntu20.04安装ZED-SDK

一.官网地址 ZED SDK 4.2 - Download | Stereolabs 选择适配版本进行下载二.安装程序下载完成后，进入文件目录，打开终端，输入： chmod x ZED_SDK_Ubuntu20_cuda11.8_v4.2.2.zstd.run ./ZED_SDK_Ubuntu20_cuda11.8_v4.2.2.zst…...

编程日记 2025/5/24 16:46:14

Pytorch | 从零构建GoogleNet对CIFAR10进行分类

Pytorch | 从零构建GoogleNet对CIFAR10进行分类 CIFAR10数据集GoogleNet网络结构特点网络整体架构应用与影响Inceptionv1到Inceptionv2 GoogleNet结构代码详解结构代码代码详解Inception 类初始化方法前向传播 forward GoogleNet 类初始化方法前向传播 forward 训练过程和测试结…...

编程日记 2025/5/20 17:44:58

蓝桥杯刷题——day9

蓝桥杯刷题——day9 题目一题干解题思路一代码解题思路二代码题目二题干解题思路代码题目一题干小蓝最近在研究一种浮点数的表示方法：R格式。对于一个大于0的浮点数d，可以用R格式的整数来表示。给定一个转换参数n，将浮点数转换为R格式整…...

编程日记 2025/5/19 5:18:37

ffmpeg翻页转场动效的安装及使用

文章目录前言一、背景二、选型分析2.1 ffmpeg自带的xfade滤镜2.2 ffmpeg使用GL Transition库2.3 xfade-easing项目三、安装3.1、安装依赖（[参考](https://trac.ffmpeg.org/wiki/CompilationGuide/macOS#InstallingdependencieswithHomebrew)）3.2、获取ffmpeg源码3.3、融合xf…...

编程日记 2025/5/20 20:15:09

分布式刚度编织，让可穿戴触觉更出色 ——Haptiknit

大家好！今天来了解一项非常有趣的科技成果 ——“Haptiknit：用于可穿戴触觉的分布式刚度编织”——《Haptiknit: Distributed stiffness knitting for wearable haptics》发表于《SCIENCE ROBOTICS》。在现代科技发展中，可穿戴触觉设备越来越…...

编程日记 2025/5/23 5:20:22

Elasticsearch：什么是查询语言？

查询语言定义查询语言包括数据库查询语言 (database query language - DQL)，是一种用于查询和从数据库检索信息的专用计算机语言。它充当用户和数据库之间的接口，使用户能够管理来自数据库管理系统 (database management system - DBMS) 的数据。最广…...

编程日记 2025/5/19 17:19:51

相关文章：