no-image

移動・回転・拡大・縮小

transform/ブロックの変化

ブロックの変化

結果

SAMPLE TEXT

解説

「transform」は、ボックスの変化を自由自在に行えます。
例題では、CSS3.0 MAKERさんを使用して、作っています。
実際に自分で制作しようとすると非常に難しい点がありますので、こういうサービスを利用して作るのが理想的です。
JavaScriptと併用すれば、Flashのような動的な動きを持たせることもできます。

「translate」は、(右への移動,下への移動)。
「translateX」は、(右への移動)。
「translateY」は、(下への移動)。
「rotate」は、角度(単位はdeg)。
「scale」は、(横の倍率,縦の倍率)。
「scaleX」は、(横の倍率)。
「scaleY」は、(縦の倍率)。
「skew」は、(横の角度,縦の角度)。
「skewX」は、(横の角度)。
「skewY」は、(縦の角度)。
「none」は、何もしない状態。

transform-origin/ブロックの標準点

ブロックの標準点。

結果

SAMPLE TEXT 1
SAMPLE TEXT 2

解説

「transform」の標準点を、変更できます。
ボックスの左上がデフォルトの標準点になります。
そこから、%やpx等で配置を調整します。
また、主な値として「left、center、right」と「top、center、bottom」を指定できます。
例題では、「right bottom」を指定しています。