网站 建设 语言,优化前网站现状分析,芜湖设计公司排名,室内装修培训新增需求#xff0c;客户需要类似PPT的剥离效果用于WEB页面翻页#xff0c;查找资料后#xff0c;参考下方的掘金博主的文章#xff0c;并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量#xff0c;样式style中的属性与宽高的关系整理成了公式进行动态计算。
…新增需求客户需要类似PPT的剥离效果用于WEB页面翻页查找资料后参考下方的掘金博主的文章并将HTML修改成vue的页面进行使用。其中宽度、高度改成了变量样式style中的属性与宽高的关系整理成了公式进行动态计算。
宽高比例建议不超过2倍否则样式就会有问题。如果有极限值出现的情况建议把rotateBox的border显示进行调整时各个div之间的关系看得更清晰。 【完整代码】
templatediv classcontainerarticlediv classbookdiv classrotateBox :stylerotateBoxStylesdiv classpageItem front :style[pageItemStyles,frontStyle]figureimg srchttps://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg altfigcaptionPage 1/figcaption/figure/divdiv classpageItem back :style[pageItemStyles, backStyle]figureimg srchttps://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg altfigcaptionPage 2/figcaption/figure/div/divdiv classpageItem :stylepageItemStylesfigureimg srchttps://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg altfigcaptionPage 3/figcaption/figure/div/div/article/div
/templatescript
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),}},},
}/scriptstyle scoped langless
.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; // 2w0.5h// height: 1200px; // 2w0.5h// bottom: -1000px; // -2w// transform-origin: 0px 1200px; // 0 2w0.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实现翻页效果
