月季【摄影：闲言不语】（学习书页制作）
<style>
.book {
left: -30px;top:20px;
display: flex;
align-items: center;
width: 800px;
height: 500px;
perspective: 3000px;
cursor: pointer;
padding: 10px;
position: relative;
background: url('https://pic.imgdb.cn/item/6268d664239250f7c553db27.jpg') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;border-radius:12px;
}
.page {
background: #D3E9F8;
padding: 20px;
width: 310px;
height: 400px;
color: #08086F;
left: 50%;
border-left: 1px solid #dcdcdc ;
transform-origin: left;
box-shadow: inset 0px 0px 2px rgba(0,0,0,.5), 1px 1px 12px rgba(255,255,255,.8);
transform-style: preserve-3d;
position: absolute;
}
.page span { display: block; }
@keyframes rot1{
from { transform: rotateY(0deg); }
to { transform: rotateY(-180deg); }
}
@keyframes rot2{
from { transform: rotateY(-180deg); }
to { transform: rotateY(0deg); }
}
</style>
<div class="book">
<div class="page"><span>四月月季赛牡丹—1（摄影：闲言不语）</span>
<div style="position: absolute; left:30px; top: 60px;">
<img alt="" src="https://pic.imgdb.cn/item/6268e1a1239250f7c5678253.jpg"/></div></div>
<div class="page"><span>四月月季赛牡丹—2（摄影：闲言不语）</span>
<div style="position: absolute; left:30px; top: 60px;">
<img alt="" src="https://pic.imgdb.cn/item/6268d8f8239250f7c55a4343.jpg"/></div></div>
<div class="page"><span>四月月季赛牡丹—3（摄影：闲言不语）</span>
<div style="position: absolute; left:30px; top: 60px;">
<img alt="" src="https://pic.imgdb.cn/item/6268d924239250f7c55aa50d.jpg"/></div></div>
<div class="page"><span>四月月季赛牡丹—4（摄影：闲言不语）</span>
<div style="position: absolute; left:30px; top: 60px;">
<img alt="" src="https://pic.imgdb.cn/item/6268d942239250f7c55ae7ac.jpg"/></div></div>
<div class="page"><span>四月月季赛牡丹—5（摄影：闲言不语）</span>
<div style="position: absolute; left:30px; top: 60px;">
<img alt="" src="https://pic.imgdb.cn/item/6268d95b239250f7c55b216f.jpg"/></div></div>
</div>
<script>
let wyy = document.createElement('iframe');
wyy.src = 'https://music.163.com/outchain/player?type=2&id=1351464406&auto=1&height=66';
wyy.style.display = 'none';
document.querySelector('.book').appendChild(wyy);
let page = document.querySelectorAll(".page");
let idx = 0;
let all = page.length;
let currentPage = 0;
setzIdx();
document.querySelector(".book").onclick = function(){
if(idx == 0){ //前翻
page.style.animation = "rot1 .5s linear forwards";
page.children.style.transform = "rotateY(-180deg)";
currentPage ++;
if(currentPage == all){
idx = 1;
currentPage = all - 1;
}
setzIdx();
} else { //后翻
page.style.animation = "rot2 .5s linear forwards";
page.children.style.transform = "rotateY(0deg)";
currentPage --;
if(currentPage < 0){
idx = 0;
currentPage = 0;
}
setzIdx();
}
}
function setzIdx(){
for(j=currentPage; j<all; j++){
page.style.zIndex = all - j;
}
for(j=0; j<currentPage;j++) {
page.style.zIndex = j + 1;
}
if(currentPage == all - 1) page.style.zIndex = all;
}
</script> 看到这个书页制作，想起不语的摄影，正好可以用来做成帖子。@闲言不语
结果晚上看到黑黑的改进版的书页，已经做好的就发出来吧，来不及改了{:4_173:}@马黑黑 自己手动翻页哦，一起欣赏不语镜头下美丽的月季花。 关于月季的诗句很多：
【宋】苏轼
花落花开无间断，春来春去不相关。
牡丹最贵惟春晚，芍药虽繁只夏初。
唯有此花开不厌，一年长占四时春。
（这首也是用在帖子里的诗句）
【宋】张耒
月季只应天上物，四时荣谢色常同。
可伶摇落西风里，又放寒枝数点红。 【宋】杨万里
只道花无十日红，此花无日不春风。
一尖已剥臙脂笔，四破犹包翡翠茸。
别有香超桃李外，更同梅斗雪霜中。
折来喜作新年看，忘却今晨是季冬。 【明】张新
一番花信一番新， 半属东风半属尘。
惟有此花开不厌， 一年长占四季春。 美妙的月季一年四季都在开放，谁说花无百日红，月季却是开了一拨又一拨呢。 看到网友的蔷薇花，思念同济大学东边围墙的一大片蔷薇花，唉，出不了小区，你解封了吗？ 小画册，看着不错。闲言不语的作品很优雅大气 上海朝阳 发表于 2022-4-27 20:51
看到网友的蔷薇花，思念同济大学东边围墙的一大片蔷薇花，唉，出不了小区，你解封了吗？
那处地方倒没去过，记得学校里有樱花，这个春天肯定是错过了呢。我们还没解啊，整个上海应该是同步的吧。 马黑黑 发表于 2022-4-27 22:15
小画册，看着不错。闲言不语的作品很优雅大气
做完了才看到你的改进版代码{:4_173:} 红影 发表于 2022-4-27 22:24
做完了才看到你的改进版代码
你用的是最基本的功能，有一些逻辑性还没处理好 马黑黑 发表于 2022-4-27 22:25
你用的是最基本的功能，有一些逻辑性还没处理好
是的，这个只是能翻页了，图片也还是反的，等空了用你新发的代码重做个。 红影 发表于 2022-4-28 07:57
是的，这个只是能翻页了，图片也还是反的，等空了用你新发的代码重做个。
可以多尝试，没问题的。只是，黑书还处于开发中，时间又太零碎，总存在这样那样的bug，美工更没时间做呢 红影朋友早晨好！书页制作有个性，诗配画相得益彰。 马黑黑 发表于 2022-4-28 08:12
可以多尝试，没问题的。只是，黑书还处于开发中，时间又太零碎，总存在这样那样的bug，美工更没时间做呢
黑黑厉害，我只能跟在后面学，自己弄没那本事呢{:4_187:} 梦油 发表于 2022-4-28 09:17
红影朋友早晨好！书页制作有个性，诗配画相得益彰。
谢谢梦油鼓励，我是跟在后面学习呢，这个代码挺适合连续的多图，就想起不语最近发的摄影了{:4_173:} 红影 发表于 2022-4-28 10:32
谢谢梦油鼓励，我是跟在后面学习呢，这个代码挺适合连续的多图，就想起不语最近发的摄影了
红影朋友秀外慧中、敏而好学。俺要向你学习！