INDEX >>
トランスフォームでこんなデザインができる！
モジュールのデザインタブの下のほ方にあるトランスフォーム。
こんなデザインが簡単にできる設定です。
トランスフォームは要素の「変形」設定
トランスフォームを使えば、どんなモジュールでも、また、行やセクションも、場所を変えたり大きさを変えたり変形することができます。
操作も簡単で、その場でどう動いているか確認できるので直感的にデザインできます。
セクションや行の枠を超えたデザインができるので、さらに自由にカスタマイズできる機能です。
4種類の設定をおぼえよう
それでは、トランスフォームの使い方をみていきましょう。
拡大・縮小（Scale）
一番左のScaleはモジュールの拡大・縮小ができます。
デフォルト（初期設定）では、モジュールの縦横比を維持したまま拡大・縮小がされますが、右下のリンクマーク（クリップみたいな形のマーク）を外すと、縦横それぞれに拡大・縮小ができます。
移動（Position）
ポジションは、モジュールの移動ができる設定です。
上下左右どの方向にも、直感的に動かせるのが嬉しいですね！
回転（Rotate）
回転は、モジュールの中心を起点として、3つの方向にモジュールを回転できます。
それぞれの回転を生かして立体的な奥行きを演出することも可能です。
Photoshopのようなデザインツールを使うことなく、平面の画像を3Dのように扱うことができます。
歪み（Skew）
歪みは、モジュールの中心を軸にして、ビヨンっと引き伸ばした表現ができます。
歪みと先述の回転をうまく組み合わせれば、奥行きの表現がさらに細かくなり、3D感をアップすることができます。
原点（Origin）
デフォルト設定では、トランスフォームの4つの動きは、モジュールの中心を軸にしています。
原点（origin）の設定により、その軸を変更することができます。
真ん中を中心に45°右に回転するのと、左上を中心に45°右に回転させるのでは、全く違った動きになりますね！
ホバーエフェクトと合わせて使う
トランスフォームはホバーエフェクトと組み合わせるととっても面白いんです。
こちらの例は、縮小・拡大、回転や歪みに加えて、影と色彩を使って簡単に表現できます。
こんなデザインをコードで書くとなると頭が混乱してしまいそうですね。
Diviなら操作をしたその場でどういう風に動くのかわかるので、本当に簡単にできてしまいます。
CSSからビジュアルビルダーへ
ここまで解説してきたトランスフォームの内容は、CSSというコーディングが元になっています。
例えば、移動する時には、
transform: translate(100px, 100px);といったコードを使ってX軸方向に100px、Y軸方向に100px移動しろ、という命令を書いてデザインします。
そのコードをわかりやすく手元の動きと合わせてデザインできるようになっているのが、Diviビルダーです。
ますますコードが必要ない世界になってきていますね！！
