どうも！LSSです！！
先日の記事、
で既にめくる事ができる本を作っていただいており、そこから新たに読者登録していただいた方までおられます。
とってもとっても、ありがとうございます^^
で、その「本をめくる」CSSですが、もちっと詳しい説明が必要かと思ってまして、今回は「ページの追加方法」について書きます！
ページの追加方法
例えば「６枚目の紙（＝表裏で２ページ分）」を追加する場合、下記コードのうち、オレンジ太字部分を追加する事で実現します。
…ちょっと変更点が多いのが難点ですが^^;
また、同じ要領で７枚目、８枚目…と増やしていく事ができます。
コード
<style><!--
.cssbook{position:relative;}
#ch01,#ch02,#ch03,#ch04,#ch05,#ch06{display:none;}
#pg01a,#pg01b,#pg02a,#pg02b,#pg03a,#pg03b,#pg04a,#pg04b,#pg05a,#pg05b,#pg06a,#pg06b{
position:absolute;
width:150px;
height:200px;
border:1px solid black;
background-color:#ffffee;
transition:1s;
backface-visibility:hidden;
}
#pg01a,#pg02a,#pg03a,#pg04a,#pg05a,#pg06a{
left:50%;
transform-origin:left;
transform:perspective(1500px) rotateY(0deg);
}
#pg01b,#pg02b,#pg03b,#pg04b,#pg05b,#pg06b{
right:50%;
transform-origin:right;
transform:perspective(1500px) rotateY(180deg);
}
#ch01:checked~#pg01a,#ch02:checked~#pg02a,#ch03:checked~#pg03a,#ch04:checked~#pg04a,#ch05:checked~#pg05a,#ch06:checked~#pg06a{
transform:perspective(1500px) rotateY(-180deg);
}
#ch01:checked~#pg01b,#ch02:checked~#pg02b,#ch03:checked~#pg03b,#ch04:checked~#pg04b,#ch05:checked~#pg05b,#ch06:checked~#pg06b{
transform:perspective(1500px) rotateY(0deg);
}
#pg01a{z-index:10;}
#pg02a{z-index:9;}
#pg03a{z-index:8;}
#pg04a{z-index:7;}
#pg05a{z-index:6;}
#pg06a{z-index:5;}
--></style>
<div class="cssbook">
<input id="ch01" type="checkbox" />
<input id="ch02" type="checkbox" />
<input id="ch03" type="checkbox" />
<input id="ch04" type="checkbox" />
<input id="ch05" type="checkbox" />
<input id="ch06" type="checkbox" />
<label id="pg01a" for="ch01">表紙の内容</label>
<label id="pg01b" for="ch01">中の文章</label>
<label id="pg02a" for="ch02">中の文章</label>
<label id="pg02b" for="ch02">中の文章</label>
<label id="pg03a" for="ch03">中の文章</label>
<label id="pg03b" for="ch03">中の文章</label>
<label id="pg04a" for="ch04">中の文章</label>
<label id="pg04b" for="ch04">中の文章</label>
<label id="pg05a" for="ch05">中の文章</label>
<label id="pg05b" for="ch05">中の文章</label>
<label id="pg06a" for="ch06">中の文章</label>
<label id="pg06b" for="ch06">中の文章</label>
</div>
３つのidがセットになっている、とお考えください
ch〇〇、pg〇〇a、pg〇〇b、と３つのIDを持つ要素で、ページの表裏を持つ「１枚の紙」を構成しています。
（〇〇の部分には連番が入ります。実は連番じゃなくてもOKですが、連番にすると管理しやすいと思います。）
ですので、HTML部分については、６枚目を追加する時はその直前の「ch05」「pg05a」「pg05b」に関する部分をコピペして、数字だけ変更すると追加が楽です^^
ちょっと注意が必要なところが２か所
#pg01a{z-index:10;}
#pg02a{z-index:9;}
#pg03a{z-index:8;}
#pg04a{z-index:7;}
#pg05a{z-index:6;}
#pg06a{z-index:5;}
この「z-index」はpg〇〇aに対して、連番と逆順の数値にする必要があります。
10から始めていますが、逆順であれば数値はいくつでもいいので、99,98,97…という風に変更してもOKです^^
もうひとつは、
<label id="pg06a" for="ch06">中の文章</label>
<label id="pg06b" for="ch06">中の文章</label>
の部分で。「pg05a」「pg05b」からコピペした場合、連番を変更する必要がある個所が２つづつある、というところです。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
