【CSS】本をめくる、という動作をCSSで表現してみました。

　どうも！LSSです！！

以前から「実現できそう、いつかやってみたい」と思っていたものが完成しました！

Webページ上に置いた本の「ページをめくる」動作を、JavaScriptを使わずにCSSで表現してみたんですね。

ぜひ、クリックして遊んでみてください^^

本をめくるサンプル

↓本をクリックするとページをめくる事ができます。

おおきなもも 昔々、
あるところに
おじいさんと
おばあさんが住んでいました。 おじいさんは
山へしばかりに、
おばあさんは
川へ洗濯に行きました。 おばあさんが
川で洗濯をしていると、なんと！
川上の方から
とってもとっても
大きな桃が どんぶらこ～
どんぶらこ～
と、流れてくるではありませんか。 それを見て、
おばあさんは
考えました。 「こげな大きな桃が流れてくるわけはねぇだ。きっと狐か狸が、わしを騙そうとしとるにちげぇねえ！」 おばあさんは桃にかまわず、洗濯を済ませると家に帰りました。

めでたしめでたし 作：
リトル須藤蓮二

コード

<style><!--
.cssbook{position:relative;}

#ch01,#ch02,#ch03,#ch04,#ch05{display:none;}

#pg01a,#pg01b,#pg02a,#pg02b,#pg03a,#pg03b,#pg04a,#pg04b,#pg05a,#pg05b{
position:absolute;
width:150px;
height:200px;
border:1px solid black;
background-color:#ffffee;
transition:1s;
backface-visibility:hidden;
}

#pg01a,#pg02a,#pg03a,#pg04a,#pg05a{
left:50%;
transform-origin:left;
transform:perspective(1500px) rotateY(0deg);
}

#pg01b,#pg02b,#pg03b,#pg04b,#pg05b{
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{
transform:perspective(1500px) rotateY(-180deg);
}

#ch01:checked~#pg01b,#ch02:checked~#pg02b,#ch03:checked~#pg03b,#ch04:checked~#pg04b,#ch05:checked~#pg05b{
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;}
--></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" />
<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>
</div>

↑のコードをコピペして、赤太字部分をそれぞれのページに入れたい文章に変更する事で、Web上でめくって読める本を作る事ができます。

※はてなブログのHTML編集にコピペした場合、終盤のHTML部分の改行が詰められてしまいますが、問題なく動作します。

というわけで…

このサンプルは、

little-strange.hatenablog.com

の改変です。

「カードをめくる」は１枚のカードの裏表だけでしたが、そのセットを５枚かさねて表示し、回転の軸を表面の時は左、裏面の時は右になるように指定したものです。

ページをめくったか否か、を判定するために、

<input id="ch01" type="checkbox" />

のチェックボックスを置き、そのチェック状態の切り替え 兼 めくられるページに当たるのが、

<label id="pg01a" for="ch01">表紙の内容</label>
<label id="pg01b" for="ch01">中の文章</label>

のaとb、表裏セットですね。 

チェックボックスは

#ch01,#ch02,#ch03,#ch04,#ch05{display:none;}

で非表示にしています。

…CSSの指定部分が（なるべく簡略にまとめるようにしましたがそれでも）結構多いですね^^;

ページを増やす事も可能ですが、各CSS指定部分に同様につぎ足しする必要があるので、ちょっと難しいかも？

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^