3D表現などもできるFramerのTransform
一見複雑に見えるこんな要素もノーコードでTransformを使用し作成することができます。
実際のプレビューはこちら。
Transformの設定項目とできること
要素を選択し、+を押して必要な要素を出しながら右カラムで設定します。
Scale（拡大・縮小）：
最もシンプルな変形の一つが「Scale」です。要素の大きさを変更できる基本的な機能です。
Skew（傾斜）：
Skewは要素を傾斜させる機能です。X軸とY軸で傾斜角度を設定でき、より動的な表現が可能になります。
Rotate（回転）
回転には2種類のモードがあります：
2D回転：従来の平面上での回転
3D回転：X軸、Y軸、Z軸それぞれを基準とした立体的な回転
Perspective（遠近感）
3D回転を行う際、Perspectiveを適切に設定することで、より自然な立体感を表現できます。
値が小さい（例：500）：より強い3D効果
値が大きい（例：5000）：より穏やかな3D効果
Depth（奥行き）
Depthは要素にZ軸方向の奥行きを与える機能です。これにより、要素が画面に近づいたり遠ざかったりする表現が可能になります。ただし、この効果を見るには必ずPerspectiveの設定が必要です。
また、この見本のような入れ子構造の要素で3D変形を行う際後述のPreserve 3Dの適用が必要です。
Origin（変形の基準点）
Originは変形の基準となる点を設定する機能です。デフォルトでは中心点（50%, 50%）に設定されていますが、例えば：
左上を基準にしたい場合：X=0%, Y=0%
右下を基準にしたい場合：X=100%, Y=100%
Back Face（裏面の表示/非表示）
要素を回転させた際の裏面の表示/非表示を制御できます。カードめくりなどのアニメーションを作る際に特に重要な設定です。
Preserve 3D（3D空間の保持）
入れ子構造の要素で3D変形を行う際に重要な設定です。親要素のPreserve 3Dを有効にすることで、子要素も同じ3D空間内で変形するようになります。これにより、より複雑な3Dアニメーションの作成が可能になります。
3Dカードの参考
今回説明に使用したカードのRemixリンクはこちら。
構造などをファイルで確認してみるとよりイメージが理解しやすいと思います。
←