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

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

サンプル01-Aの処理

 サンプル01-Aの場合、最初の位置から右に150ピクセル、下に200ピクセル移動した後に回転と拡大の処理が適用される。

サンプル01を移動(画像をクリックすると拡大します) サンプル01を移動(画像をクリックすると拡大します)

回転&拡大(画像をクリックすると拡大します) 回転&拡大(画像をクリックすると拡大します)

サンプル01-Bの処理

 サンプル01-Bの場合、まずは回転と拡大の処理が適用されるが、この後の移動の処理は回転した方向に対して実行される。また、移動距離にもscale()で指定した倍率が適用され、右方向に150×1.5=225ピクセル、下方向に200×1.5=300ピクセルの移動が行われる。

サンプル01を回転&拡大(画像をクリックすると拡大します) サンプル01を回転&拡大(画像をクリックすると拡大します)

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