CSS TransformとCSS Tramsotion
灯では、俯瞰と鳥瞰の2つのビューモードが実装されています。俯瞰は日本地図を真上から見たビューであり、鳥瞰はやや斜めから望むようなビューとなっています。これらの視点の切り替えはユーザによって行われますが、視点の変換にはCSS Transformを、変換中のアニメーションにはCSS Transitionをそれぞれ利用しています。
CSS TransformはDIVやSPANなど、よく使うHTMLエレメントだけでなく、SVGに対しても有効です。ここでは、先に作成したSVGをCSS Transformを使って2.5次元的な見せ方に変換させてみます。
CSS Transformをかけてみよう
俯瞰した状態で日本地図をクリックすると、その地域の詳細を見るべく2.5次元的な鳥瞰図へと遷移します。ここでも先ほどのSVGを同様の効果を与えてみることにします。疑似2.5次元的な見た目を作るためには、縦を半分に縮小し、その状態で45度傾ければ最も簡単にそれらしくなります。CSS Transformでは、拡大縮小の効果をもたせるscale、回転効果としてrotate、歪みのskewおよび移動効果のtranslateが用意されています。この例では、scaleとrotateを使って実現します（SVGは前回のものを使っているので割愛します）。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <script src="jquery-1.5.min.js"></script> <script src="svg_8.js"></script> <link href="css_1.css" rel="stylesheet" /> <title>css_1</title> </head> <body> <object id="sample-svg" width="100%" height="100%" data="svg_8.svg" type="image/svg+xml" ></object> </body> </html>
#sample-svg {
-moz-transform:scale(1, 0.5) rotate(45deg);
-webkit-transform:scale(1, 0.5) rotate(45deg);
-o-transform:scale(1, 0.5) rotate(45deg);
-ms-transform:scale(1, 0.5) rotate(45deg);
}
CSS内でsample-svgにtransform効果を与えています。scaleはX方向とY方向の拡大縮小率を別々に指定できます。サンプルではscale(1, 0.5)とし、X軸方向には等倍で、Y軸方向を半分にするといった指定となります。ちなみにscale(2)などと書いた場合には、X軸,Y軸双方に2倍されます。次にrotate(45deg)を指定していますが、これは45度(degree)回転しなさい、という指定になります。
なお、CSS TransformsはW3Cで仕様策定が進められていますが、まだ仕様が完全には確定していません。そのため各ブラウザでは策定中の仕様をベンダー接頭辞と言われるものを付けてサポートしています。-mozはFirefox、-webkitはChromeやSafariなどのwebkit系、-oはOpera、-msはIEのものになります。
また、先ほどJavaScriptとの連携を行いましたが、それはCSS Transformをかけた後でも有効です。CSS Transformがかかり、斜めになってしまいましたが、イメージをクリックすればイメージを、テキストをクリックすればテキストを取得できることがわかります。
CSS Transition を使ってみよう
CSS Transitionを使えば、CSS Transformによる変換をかける際に、アニメーションを利用して滑らかに変換できます。灯では、俯瞰図～鳥瞰図間の遷移にこの技術を利用しています。サンプルでは、SVGでのクリックをうけて滑らかに元の形に変換し、再度クリックすると2.5次元的になります（HTMLとSVGはほぼ同様なので割愛します）。
#sample-svg {
-moz-transform:scale(1, 0.5) rotate(45deg);
-webkit-transform:scale(1, 0.5) rotate(45deg);
-o-transform:scale(1, 0.5) rotate(45deg);
-ms-transform:scale(1, 0.5) rotate(45deg);
}
#sample-svg.clicked {
-moz-transform:scale(1, 1) rotate(0deg);
-webkit-transform:scale(1, 1) rotate(0deg);
-o-transform:scale(1, 1) rotate(0deg);
-ms-transform:scale(1, 1) rotate(0deg);
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
}
function transformWithAnimation(event) {
var target = $("#sample-svg");
//CSS で clicked というクラスを定義し、その脱着によって実現している。
if (target.hasClass("clicked")) {
target.removeClass("clicked")
} else {
target.addClass("clicked")
}
}
$(document).ready(function(){
var svgobject = document.getElementById("sample-svg");
svgobject.addEventListener("load", function(eventOfLoad) {
//object で読み込まれた SVG ドキュメントを取得する
var svgDocument = eventOfLoad.target.getSVGDocument();
svgDocument.addEventListener("click", transformWithAnimation, false);
}, false);
});
CSS Transitionは、変換前・変換後のCSS Transformの差を、指定した秒数で線形的に滑らかに推移させます。サンプルでの指定では transition-duration: 1s;つまり1秒で変換してくださいと指定しています。
ここまで、SVGドキュメントの作り方とobjectとしての取り込み方、JavaScriptとの連携方法およびCSS TransformとCSS Transitionを併せて見てきました。
