目次
- 1. 例: 回転
- 2. 例: スキューと平行移動
- 3. 参照
Firefox 3.5 (Gecko 1.9.1) は CSS transforms をサポートします。CSS transforms はアフィン/線形変換を HTML 要素に対して適応する一連の CSS プロパティによって実現されます。変換には回転、スキュー (傾け)、拡大縮小と平行移動が含まれます。これらのプロパティは WebKit チームによる案を元にしており、最近 W3C 草案になりました。
Mozilla は現在
-moz-transform と
-moz-transform-origin プロパティをサポートしています。
Note: 現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。
例: 回転
この例では Google ホームページを表示した iframe を、左下を中心に 90 度傾けます。
<div style="-moz-transform: _fckstyle="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"> <iframe src="http://www.google.com/" width="500" height="600" /> </div>
例: スキューと平行移動
この例では Google ホームページを使った iframe を、X 軸に 10 度傾けます。
<div style="-moz-transform: _fckstyle="-moz-transform: skewx(10deg) translatex(150px);
-moz-transform-origin: bottom left;">
<iframe src="http://www.google.com/" width="600" height="500" />
</div>
