画像をCSSで本のようにする

css

これは新鮮！ただの画像をCSSで回転させて立体感をだして本のように表示する手法。
発想って大事だなと思った。
やり方はリンク先のhtmlとcssをそのままコピペするだけだけど、Modernizrというjavascriptのライブラリを読み込まないといけない。
Modernizrは使用しているブラウザがhtml5、css3に対応しているかを検出するライブラリ。
ここから検出したい項目を選択して、自分用にカスタマイズしたものをダウンロード。
あとはタグの前で読み込む。
Modernizrがcsstransforms3dというクラスを追加するので、対応してるブラウザとそうじゃないブラウザとにわけてcssが書ける。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.book img { vertical-align: middle; }

.csstransforms3d  .books {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.csstransforms3d  .book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin: 0;
}

.csstransforms3d  .book img {
  position: relative;
  max-width: 100%;
}

.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

</style>
</head>
<body>


<div class="books">
  <div class="book">
   <img src="./book.jpg" />
  </div>
</div>

<script src="modernizr.custom.17973.js"></script>
</body>
</html>

3Dを扱うプロパティは使う機会がなくてよくわからないけど、
以下のプロパティで画像を回転させている。

プロパティ名 説明
-moz-perspective 配置された要素に視点を与えるためにz平面とユーザー間の距離を指定
-moz-transform-style、-webkit-transform-style 子要素が3D空間に配置されてるか要素の平面に平らにされているかを指定
-moz-transform、-webkit-transform 配置された要素を変形

さらに擬似要素のbefore、afterで要素の前と後にcontentで空白を表示して、それをbox-shadowやbackground-colorで装飾して本の厚みを表現してる。
WebGLほど本格的なことはできないと思うけど、ハードウェアが対応してなくても表示できるのは嬉しい。
奥行きをそれっぽく見せるくらいの簡単な目的なら十分そう。
もっと勉強しないとなー。