CSS3 -webkit-perspectiveで地図上空を立体的に見回しちゃう
Author: 秋葉秀樹 | Comments(0) | Trackback(0)えーっと、本を書きました、5/28に毎日コミュニケーションズから発売される「CSS3デザインプロフェッショナルガイド」という本を共著で、SOY CMS2の開発者、宮澤さんと、東京のWeb制作会社、ピクセルグリッドの小山田さんや外村さん、そしてITプロフェッショナルの蒲生さん、そして弊社とみたと僕、といった豪華（？）メンバーで執筆しました。
amazonではすでに公開されています。
どういうコンセプトかというと、大きく3つの章に分けられています。
入門的な章と、リファレンス的な章と、ビジュアルサンプルの章。
僕はビジュアルサンプルを担当しました。
始めは、そもそもCSS3ってどんなものか？とか、どんな場面でうまく使うべきか？などを主に蒲生さんが担当してます。
これはどちらかというと、私たちフロント周りの制作をしている人やデザイナーさん向けなので、
今までの書籍などを読んで、どうしても難しく考えがちな人に読んでもらいたいです。
そして小山田さんや外村さんはとてもCSS3周りの仕様書などに詳しく、CSS3のリファレンスを担当しています。
彼らの実績豊富な知識と常に新しい情報を発信しているCSS3の最新の動向などを、分かりやすく解説したものです。
そして僕が担当したビジュアルサンプルでは、実際CSS3で作ったサンプルを公開してます。
単に画像を使わずにボタンを作ったり、アニメーションや3Dゲームの応用を解説したり、商品ギャラリーの見せ方だったり、フォームをカスタマイズしてもっと便利にしたり、出来るだけ分かりやすく、マニアックにならないように作ったつもりです。
実は、執筆途中でFirefoxのバージョンが4になったり、Operaのバージョンが11になったり、それによって書き直しが発生したところが大変でした。
例えばFirefox、3.6までは遷移（アニメーションのようなもの）を行うtransitionプロパティがサポートされてなかったけれど、4でサポートされだした、とか。
OperaではCSS3グラデーションが11から直線グラデーションだけサポートされたとか。
対応ブラウザの確認をしたり、不具合やクセがないか確認したり。
そんな中こんどはInternetExploler 10の発表があって、Platform Previewがダウンロード出来るようになってるので、そっちも調べたり。
本当に過渡期なんですね、まさにまっただ中。
さてさて、今日はとても簡単なサンプルなんですが、Safariで実装されているCSS3の3Dトランスフォームを試したいと思います。
書籍では、3Dカードゲームのサンプルを執筆していますが、これはもっと簡単なもの。
平面の広大な地図を上空に見おろし、視点を回転させるようにしてみましょう。
CSS3にカメラオブジェクトなんてないですね。だから地図を立体回転させて、自分が回っているようにみせます。
ただ、この画像はちょっと使用上問題があるので、実際のサンプルでは「白地図、世界地図、日本地図が無料【白地図専門店】」さんからダウンロードさせていただきました、ありがとうございます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 地図を上空から眺める</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="3d.js"></script>
</head>
<body>
<div class="world">
<img src="world_ga_kabegami1_1024.gif" alt="地図">
</div>
</body>
</html>
これだけ、つまり地図をdivタグで囲っただけです。
そこでCSSにより、横軸（X軸）を50度回転させます。
div.world {
-webkit-transform: rotateX(50deg);
}
Safariで見るとこんな感じです。
これでは、縦がつぶれて見えるだけです。
ではこれに「遠近感」をつけます。
CSS側で、まずbody要素に遠近感をつけます。
body {
-webkit-perspective: 300px;
}
結果、Safariではこう見えます。
気になるのは、300pxという数値ではないでしょうか？
この数値、実は大きくなればなるほど、平面的に近づいていきます。
ゼロだと、まともに見えることが出来ません、数値が小さければ、遠近感もキツくなります。（このあたりは書籍を読んでいただけたら。）
さて、それではキーボードの左右（←と→）で視点を360度回転するようにしましょう。
回転させる対象はdiv.worldです。
そして回転する軸ですが、これはrotateZになります。
これは元々地図を真っ正面から見るとZ方向の奥に軸を置いて回転させることになりますよね？
それが親のbody要素にperspectiveがかかっているせいで、Y軸と勘違いしそうですが、Z軸を回転させることが正しいのです。
この値を4度ずつ足したり引いたりすると、地図が回ります。
サンプルはこちら
サンプル(Safariで見ましょう)
では、カクカク動くのは毎回、角度が更新されているので、瞬間で角度が変わるのではなく、それをつなげるようにアニメーションさせたいので、ここではCSS3のtransitionプロパティを使います。
CSSファイルにはdiv.worldに以下を記述します。
div.world {
-webkit-transition: -webkit-transform 0.3s linear;
}
上記は「linear」がポイントです、イージングすると「くいっくいっ」と、変な動きになるので、ここはイージングなしでいきます。
今度はカクカクせず、動きます。transitionが効いているからですね。
サンプル(Safariで見ましょう)
でも、これだとキーを押したタイミングで一回回転したら止まります。
ここは一つ、transitionを使わずに、JavaScriptで一定間隔で数値を入れ替えた方が良さそうです。
角度が入っている変数に、プラスかマイナスのスピードを都度加算するといいかな？と。
サンプル(Safariで見ましょう)