明日もデザインで食べていこう![14]CSS3の本が出ます・CSS3で平面の広大な地図を立体回転させよう
── 秋葉秀樹 ──

投稿:  著者:


えーっと、本を書きました。
5/28に毎日コミュニケーションズから発売される「CSS3デザインプロフェッショナルガイド」という本を共著で、SOY CMS2の開発者、宮澤さんと、東京のWeb制作会社、ピクセルグリッドの小山田さんや外村さん、そしてITプロフェッショナルの蒲生さん、そして弊社とみたと僕、といった豪華(?)メンバーで執筆しました。amazonではすでに公開されています。
< http://www.amazon.co.jp/exec/obidos/ASIN/4839935467/
>

大きく3つの章に分けられていまして、入門的な章と、リファレンス的な章と、ビジュアルサンプルの章。

導入部分は、そもそも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にカメラオブジェクトなんてないですね。だから地図を立体回転させて、自分が回っているようにみせます。

< http://www.akibahideki.com/blog/2011/05/12/log_images/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882011-05-12%2014.55.15%EF%BC%89.html
>

この画像はちょっと使用上問題があるので、実際のサンプルでは「白地図、世界地図、日本地図が無料【白地図専門店】」さんからダウンロードさせていただきました。ありがとうございます。

<!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で見るとこんな感じです。
< http://www.akibahideki.com/blog/2011/05/12/log_images/no_perspective.html
>

これでは、縦がつぶれて見えるだけです。

ではこれに「遠近感」をつけます。
CSS側で、まずbody要素に遠近感をつけます。

body {
-webkit-perspective: 300px;
}

結果、Safariではこう見えます。
< http://www.akibahideki.com/blog/2011/05/12/log_images/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%EF%BC%882011-05-12%2016.12.20%EF%BC%89.html
>

気になるのは、300pxという数値ではないでしょうか? この数値、実は大きくなればなるほど、平面的に近づいていきます。ゼロだと、まともに見えることが出来ません、数値が小さければ、遠近感もキツくなります(このあたりは書籍を読んでいただけたら)。

さて、それではキーボードの左右(←と→)で視点を360度回転するようにしましょう。回転させる対象はdiv.worldです。そして回転する軸ですが、これはrotateZになります。

元々地図を真っ正面から見るとZ方向の奥に軸を置いて回転させることになりますよね? それが親のbody要素にperspectiveがかかっているせいで、Y軸と勘違いしそうですが、Z軸を回転させることが正しいのです。
この値を4度ずつ足したり引いたりすると、地図が回ります。

●サンプル(Safariで見ましょう)
< http://akibahideki.com/css3/20110512/no_ease.html
>

カクカク動くのは毎回、角度が更新されているからです。瞬間で角度が変わるのではなく、それをつなげるようにアニメーションさせたいので、ここではCSS3のtransitionプロパティを使います。CSSファイルにはdiv.worldに以下を記述します。

div.world {
-webkit-transition: -webkit-transform 0.3s linear;
}

上記は「linear」がポイントです、イージングすると「くいっくいっ」と、変な動きになるので、ここはイージングなしでいきます。今度はカクカクせず、動きます。transitionが効いているからですね。

●サンプル(Safariで見ましょう)
< http://akibahideki.com/css3/20110512/ease.html
>

でも、これだとキーを押したタイミングで一回転したら止まります。ここはひとつ、transitionを使わずに、JavaScriptで一定間隔で数値を入れ替えた方が良さそうです。角度が入っている変数に、プラスかマイナスのスピードを都度加算するといいかな? と。

●サンプル(Safariで見ましょう)
< http://akibahideki.com/css3/20110512/index.html
>

【あきば・ひでき】
hidetaro7@gmail.com
< http://www.akibahideki.com/blog/
>

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign...多種スキルを持つ。Web標準技術だけに執着せず、全てのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。