アルター

変更効果を使用して、要素に新鮮な魅力を与えます。要素を移動、拡大、回転、傾斜させて、3D の外観を実現します。

このハンドブックを始める前に、3D 入門ガイドをご覧ください。

このチュートリアルに含まれるもの:

1. 変化を理解する
2. 要素をシフトする
3. 要素を拡大する
4. 要素を回転させる
5. 要素の比率を傾ける
6. 設定を変更する

アルターの概要

人格には4つの種類があります:

1. シフト
2. 拡大する
3. 回転する
4. 傾斜

要素に1つまたは複数の変更を組み込むことができます。 スタイリングセクション > 影響 > 2D および 3D のアクター.

要素をシフトする

この例では、 接続ブロックこれは、 ホバー 状態：

1. 移動する セグメント から 要素パネルを含める あなたのサイトに
2. クラスを割り当てる セグメント （例：「主要セグメント」）
3. ドラッグ 接続ブロック から 要素パネルを含める に セグメント 挿入したばかりの
4. クラスを割り当てる 接続ブロック （例：「接続ブロック」）好みに応じてカスタマイズします
5. 複製する 接続ブロック 合計3
6. を選択 接続ブロック
7. 展開する スタイリングセクション > セレクターゾーン そして選択する ホバー ドロップダウンから

適用してみましょう シフト に変更する ホバー の状態 接続ブロック:

1. 展開する スタイリングセクション > 影響 > 2D および 3D 変換
2. プラス記号を選択して新しいものを追加します 変更

の シフト alterは標準的な選択肢であり、 シフト 値はピクセル (px) です。単位を変更するには、[PX] をクリックしてドロップダウンから好みの単位を選択します。

さらに詳しい情報を得る 入力値と単位.

を通じて シフト 変更すると、水平 (X) 軸に沿って要素の位置を左右に微調整できます。垂直 (Y) 軸に沿って位置を上下に微調整することもできます。X 軸と Y 軸の両方を調整すると、要素が斜めに移動します。

Z軸に沿って要素を移動すると、要素の奥行き感が変わります。ただし、 子孫の視点 最初は前駆要素に。

この図では、 セグメント 挿入した要素は、 接続ブロック微調整してみましょう 子孫の視点:

1. 選ぶ セグメント
2. 開ける スタイリングセクション > 影響 > 2D および 3D のアクター
3. 3つの点をクリックして表示します 変更構成
4. 改訂 子孫の視点 > 距離 1000ピクセルまで

さて、 子孫の視点 キーセグメント（キーセグメントの前駆要素）に設定されています。 接続ブロック — Z軸の値を更新してみましょう 接続ブロック:

1. を選択 接続ブロック
2. 展開する スタイリングセクション > セレクターゾーン
3. ドロップダウン矢印をタップして選択 ホバー
4. スクロール 影響 > 2D および 3D のアクター そして、 シフト 以前に作成した変更
5. Z値を調整して奥行き感を強調します

いずれかの上にマウスを移動します 接続ブロック 変化の影響が実際に起こっているのを観察する — 私たちの状況では、その影響は現時点ではあまりにも急激です。

効果を滑らかにするには:

1. 選択してください 接続ブロック そしてそれが なし 状態
2. 展開する スタイリングセクション > 影響 > シフト
3. プラス記号を押すとシフトが追加されます
4. ドロップダウンから選択 変更
5. をセットする 間隔 500ミリ秒まで

あなたの変革 リンクブロック ホバリングするとより滑らかに見えます。

重要： 要素の変換タイプを定義すると、その軸の1つ以上に値を設定できます。ただし、変換タイプを切り替えると（たとえば、 動く に 規模) を使用すると、変換値の設定時に初期設定が失われます。

以前の構成を失うことなく複数の変換タイプを組み込むには、追加アイコンを使用して別の変換を追加するだけです。

要素のサイズを変更する

別途紹介しましょう 規模 私たちの変革 リンクブロック: 

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. ドロップダウンメニューを展開して選択 ホバー
4. 案内する 効果 > 2D および 3D 変換 追加アイコンをクリックして新しい変換を追加します
5. タップして 規模 ボタンを押してX軸とY軸の値を調整します

規模 変換により、値が 1 を超えると要素が視覚的に拡大され、0 から 1 の間の場合は縮小されます。デフォルトでは、X 値と Y 値は比例スケーリングのために相互接続されています。個々の値を調整するには、ロック アイコンの選択を解除して、X 構成と Y 構成のリンクを解除します。

効果を観察する 規模 マウスオーバーで変換 リンクブロック.

重要： 魅力的な 3D 結果を得るには、Z 軸に沿ってスケーリングすることを検討してください。このテクニックは、さまざまな Z 値を示す子要素に特に効果を発揮します。

詳細はこちら 3Dパースペクティブ.

要素を回転する

申請する前に 回転 変革のために、既存のものを排除しましょう 動く そして 規模 変換:

1. 選択してください リンクブロック そしてそれが ホバー 州
2. アクセス スタイルパネル > 効果 > 2D および 3D 変換
3. 各変換の上にマウスを移動し、ゴミ箱アイコン（削除）を選択します。

追加する 回転 変革は今:

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. ドロップダウンメニューを展開して選択 ホバー
4. 案内する 効果 > 2D および 3D 変換 追加アイコンをクリックして新しい変換を追加します
5. タップして 回転 ボタンを押してX、Y、Z軸を調整します

要素を時計回りまたは反時計回りに回転するには、Z 軸に沿って回転する必要があります。親要素に 3D パースペクティブが設定されていない場合、X 軸と Y 軸の回転はデフォルトで平坦化されて表示されます。

X軸とY軸の回転に3Dの外観を与えるには、3Dパースペクティブを有効にします。具体的には、 子どもの視点 — 親要素に3Dパースペクティブを設定します。シナリオでは、すでに リンクブロックの 親要素、 セクション.

の衝撃を目撃してください 回転 マウスオーバーで変換 リンクブロック.

要素を傾ける

導入前に スキュー 変換するには、既存の 回転 変換：

1. 選択してください リンクブロック そしてそれが ホバー 州
2. アクセス スタイルパネル > 効果 > 2D および 3D 変換
3. 既存の変換にマウスを移動し、ゴミ箱アイコン（削除）を選択します。

追加する スキュー 変革は今:

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. ドロップダウンメニューを展開して選択 ホバー
4. スクロール 効果 > 2D および 3D 変換 追加アイコンをクリックして新しい変換を追加します
5. タップして スキュー ボタンを押してX軸とY軸の値を調整します

X軸またはY軸に沿ってせん断を調整することができます。 スキュー 変換。親要素で 3D パースペクティブを有効にしても、傾斜変換には影響しません。

変換構成を変更する

変換設定は、要素に適用されるすべての変換に影響を与える基本的なオプションを制御します。これには、変換が含まれます。 起源、表示設定 背面, 自己の視点、 そして 子どもの視点.

設定の調整には、 外観パネル > 影響 > 2D および 3D トランジション 可能です。3つの点をタップするだけで 変更構成. 

出発点

の ベース 変更の基準は、変更が行われる開始点または軸を特定します。最初は、 より低い 中間点に配置され、すべての調整がオブジェクトの中央部分から行われることを示します。

変換を微調整してみましょう 中間点 のために ハイパーリンクボックス: 

1. を選択 ハイパーリンクボックス
2. 公開 外観パネル > 識別子セクション
3. ドロップダウン矢印を選択して ホバー
4. 下にスクロール 影響 > 2D および 3D トランジション 3つの点をタップしてアクセスします 変更構成
5. 変更する ベース ポイント 
6. 修正内容をテストするには、 ハイパーリンクボックス

定義できるのは ベース いずれかの場所を選択して ベース コマンドを使用します。水平配置 (左) と垂直配置 (上) の値を入力して、配置を手動で調整することもできます。また、測定単位を px、% (デフォルト)、vw、vh の間で切り替えることができます。

シフトすると ベース たとえば、右下の場合、調整はその位置から開始されます。これは、 サイズ変更 そして スピン. 

3Dパースペクティブ

パースペクティブを指定していない場合、3D 互換のすべての変更 (例: ピボット X、ピボット Y、移行 Z、サイズ変更 Z) は、水平の 2 次元の外観を示すか、まったく影響しません。3D パースペクティブを有効にすると、3D 領域内のオブジェクトの位置を変更したり、回転したり、サイズを変更したりできるようになります。

上位の要素に視点を設定して、その子孫すべてに影響を与えることも、オブジェクト自体にのみ影響を与えることもできます。さらに、Z 軸とビューアーの間のギャップを定義することで、オブジェクトに 3D 視点を導入することもできます。

パースペクティブのギャップ測定によって、3D 効果の強さが決まります。より顕著な効果を得るには、小さい数値 (1000 ピクセル未満) を指定します。この方法では、視聴者が Z 軸に近づきます。効果を弱めるには、値を大きくします。

個別化された視点

割り当てることができます パーソナライズされた視点 3D効果をその要素とその子孫にのみ適用したい場合は、オブジェクトに メインオブジェクトに。 

紹介する 個別化された視点:

1. 影響を与えたいオブジェクトを選択してください
2. 開ける 外観パネル > 影響 > 2D および 3D トランジション 3つの点をタップして公開します 変更構成
3. 距離値を設定する パーソナライズされた視点

子孫の視点

設立 子孫の視点 上位要素に 3D エフェクトを追加すると、その依存するすべてのコンポーネントにリアルな 3D 外観が作成されます。

設定するには 子孫の視点 上位要素の場合:

1. メイン要素を選択する 子孫の視点 調整したい
2. 公開 外観パネル > 影響 > 2D および 3D トランジション 3つの点をタップしてアクセスします 変更構成
3. 刷新する ギャップ そして ベース あなたの変更のために

これらの 3D 配置は、上位要素の子孫に設定された変換プロパティに適用されます。

反対側

後方 オブジェクトの裏側の表示を決定するオプションを提供します。

デフォルトでは、要素を X 軸または Y 軸に沿って 180 度回転させると、背面から見たかのように反転して表示されます。要素内のテキスト コンテンツは、鏡を通して見ているかのように反転して表示されます。 

表示したり隠したりできます 後方 要素の変換構成内の要素の一部:

1. 調整する要素を選択してください
2. 公開 外観パネル > 影響 > 2D および 3D トランジション 3つの点をタップしてアクセスします 変更構成
3. 選択してください 見える または 隠れた のために 後方

この機能は設計時に役立ちます 回転カード 反対側のコンテンツを公開します。

これで、それらのアイテムを動かす準備が整いました。