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

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

新增需求,客户需要类似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实现翻页效果

http://www.lryc.cn/news/505419.html

相关文章:

  • uniapp使用百度地图配置了key,但是显示Map key not configured
  • Leetcode42-环形链表
  • C语言进阶(2) ---- 指针的进阶
  • 使用Python筛选图片
  • GESP CCF python五级编程等级考试认证真题 2024年12月
  • URL的概念与格式
  • 【Elasticsearch】高亮搜索:从原理到Web呈现
  • samout llm解码 幻觉更低更稳定
  • 单片机:实现多任务处理(附带源码)
  • 负载均衡oj项目:介绍
  • 剑指Offer 03比特位计数
  • 多音轨视频使用FFmpeg删除不要音轨方法
  • elasticsearch 使用enrich processor填充数据
  • VMProtect:软件保护与安全的全面解决方案
  • Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:教室信息管理系统(前后端源码 + 数据库 sql 脚本)
  • 第十二篇:linux下socket本地套接字通讯
  • Spring Boot 2.1.7 数据源自动加载过程详解
  • 【Vue.js 3.0】provide 、inject 函数详解
  • JVM(Java虚拟机)的虚拟机栈
  • Elasticsearch02-安装7.x
  • iPhone恢复技巧:如何从 iPhone 恢复丢失的照片
  • vba批量化调整word的图和图表标题
  • 【Flutter_Web】Flutter编译Web第二篇(webview篇):flutter_inappwebview如何改造方法,变成web之后数据如何交互
  • 【C语言的奥秘11】指针知识点总结(续)
  • excel 列名是数据表 的字段名 ,单元格的值 是数据表对应字段的值,生成sql插入语句
  • AI Agent与MEME:技术与文化融合驱动Web3创新
  • IO的入门
  • 构建一个rust生产应用读书笔记四(实战1)
  • SpringCloudAlibaba | Sentinel从基础到进阶
  • 算法刷题Day18: BM41 输出二叉树的右视图