血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > CSS transform 2D

xreaの広告です。

hosting by xrea.com

CSS transform

作成:2009-02-21
更新:2011-11-03

Appleから当初は独自規格として提案され、webkitに実装された座標変換のスタイルシート。geckoとOpera、やや遅れてIE9でも実装。事実上、Windowsで動くメジャーなブラウザでサポートされることになった。

座標系について

数学、と聞くと身構える人がいるかもしれませんが、まずは簡単におさらい。xy平面座標を考えると、普通3時方向にx軸、12時方向にy軸を取ると思う(図1)。ところが、HTMLにおいてはy軸が6時方向になる、という点に留意されたい(図2)。


図1 数学における一般的なxy平面座標軸

図2 HTMLにおけるxy平面座標軸

そんなこんなで、回転する方向が数学を考えると逆向きに思えることがあるけれども、軸がそもそも逆さまだからそういうことになる、ということを頭の片隅においてもらえれば。

あと、平面座標を考えるにあたり、線形代数学に基づく座標行列を適用すれば、考え得るすべてのパターンを網羅できる(ただし、三角関数が定義域を伴うという制限は付いてくる。しかし、アニメーションを考えなければ事実上制限は存在しない)。ここでは面倒という理由だけで触れない。詳しくはSVGで解説されている変換行列の定義日本語訳)を参照されたい。

rendering

CSS先行実装を使用したレンダリング

box 1
box 2
box 3
box 4

それぞれ並進(translation)、回転(rotation)、伸縮(scaling)、Y軸に沿う傾斜(skew)の変換を施したもの。

coding

...
<style type="text/css">
/* 箱を作る */
.showbox {
 	float: left;
 	margin: 4em 1em;
 	width: 100px;
 	height: 60px;
 	border: 2px solid green;
 	background-color: #fff;
 	line-height: 60px;
 	text-align: center;
}
/* box1 並進 */
.box1 {
 	-webkit-transform: translate(50px,0); /* Safari */
 	-moz-transform: translate(50px,0); /* Firefox */ /* x軸方向に50px移動 */
 	-o-transform: translate(50px,0); /* Opera */
 	-ms-transform: translate(50px,0); /* IE9- */
}
/* box2 回転 */
.box2 {
 	-webkit-transform: rotate(30deg);
 	-moz-transform: rotate(30deg); /* 時計回り方向に30度回転 */
 	-o-transform: rotate(30deg);
 	-ms-transform: rotate(30deg);
}
/* box3 伸縮 */
.box3 {
	 -webkit-transform: scale(2);
	 -moz-transform: scale(2); /* 2倍に伸長 */
	 -o-transform: scale(2);
	 -ms-transform: scale(2);
}
/* box4 傾斜 */
.box4 {
 	-webkit-transform: skewY(45deg);
 	-moz-transform: skewY(45deg); /* Y軸に沿う傾斜 45度 */
 	-o-transform: skewY(45deg);
 	-ms-transform: skewY(45deg);
}
</style>
...
<div class="showbox box1">box 1</div>
<div class="showbox box2">box 2</div>
<div class="showbox box3">box 3</div>
<div class="showbox box4">box 4</div>
...

Hands On: 2D Transformで色々と遊ぶことができる。

検証に使用したブラウザ

Internet Explorer
MSIE 9.0; Trident/5.0 バージョン9.0.3(リリース版)
Shiretoko (Firefox)
rv:1.9.1b3pre Gecko/20090221 Shiretoko/3.1b3pre(Nightly Build版)
Safari
AppleWebKit/525.28 Version/3.2.2 Safari/525.28.1(リリース版)
Opera
Presto/2.5.18 Version/10.50 pre-alpha Build 3172(Weekly Build版)

仕様書とリファレンス

CSS 2D Transforms Module Level 3 (Working Draft 2009-12-01)
http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201
Scalable Vector Graphics (SVG) 1.1 Specification (2003-01-14 REC) 7 Coordinate Systems, Transformations and Units
http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html
-moz-transform MDC
https://developer.mozilla.org/en/CSS/-moz-transform
CSS3 transitions and 2D transforms
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
The Art of Web ~ CSS: Animation Using CSS Transforms
http://www.the-art-of-web.com/css/css-animation/