変形・回転・傾き

変形の設定は、右パネルの[変形]タブで行います。

設定できる項目は「移動」「回転」「拡大・縮小」「傾き」の4種類で、変形の起点は[原点]で指定します。

ボックスをX軸・Y軸方向に移動します。

位置をずらすことで、ホバー時に要素を動かすような表現を作れます。

使用例：[ホバー]の条件付きスタイルで、ホバー時にアイコンを上方向へ少し移動させる。

ボックスを回転させます。

基本は中央を起点として回転しますが、[原点]を変更すると左端や右端など任意の位置を基準に回転できます。

ボックスを拡大・縮小します。

X軸・Y軸それぞれに倍率を設定できます。

使用例：[ホバー]の条件付きスタイルで、ホバー時に画像を105%に拡大して強調する。

ボックスを傾けます。

X軸・Y軸それぞれに対して傾き量を設定し、動きのあるデザインを施せます。

変形時の起点を、9つの位置から選択します。

中央・四隅・上下左右の辺の中央から選べるため、どの位置を基準に移動や回転などを行うか細かく調整できます。

変形設定は、　次の機能と組み合わせることで多様なアニメーション表現が可能です。 （例：回転しながら拡大する、下から浮かび上がりながら傾く）。

変形設定エリア右上の[変形ハンドル]をクリックすると、スクリーン上に変形用のハンドルが表示されます。 このハンドルをドラッグすると、ボックスの回転や拡大・縮小、傾きなどの変形を視覚的に調整できます。

回転ハンドル 回転する 比率 角度 引き延ばす 引き伸ばす 縮める のばす 引っ張る