CSSでトランスフォーム:1つの要素に複数の変形処理を適用する

エ・ビスコム・テック・ラボ
2009-02-20 19:06:01
  • このエントリーをはてなブックマークに追加

トランスフォームの基準点を指定する

 トランスフォームは、標準では要素の中心を基準点にして処理される。しかし、transform-originプロパティを利用すれば、基準点の位置を変更することが可能だ。

 transform-originプロパティは、SafariとGoogle Chromeでは-webkit-transform-origin、Firefoxでは-moz-transform-originと記述する。

 たとえば、次のようなサンプルを用意して基準点を変更してみよう。ここでは、AとBの2つのボックスを横に並べて表示している(サンプル02)。

サンプル02 サンプル02
A
B
ブラウザで表示を確認する

 transformプロパティでBのボックスを45度回転すると、次のように中心を基準点にして回転する。

サンプル02-A サンプル02-A
div#b{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
ブラウザで表示を確認する

 これに対し、transform-originプロパティで基準点をBのボックスの左下に指定すると次のようになる。

サンプル02-B サンプル02-B
div#b{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);

-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
}
ブラウザで表示を確認する

 transform-originプロパティの値は、「横方向の位置 縦方向の位置」の形で指定する。横方向の位置はleft、center、right、縦方向の位置はtop、center、bottomで指定することができる。また、%(割合)で指定することも可能だ。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]