Alters

Give your elements fresh appeal with alter effects. Shift, enlarge, revolve, and slant your elements to provide them with a 3D look.

Prior to commencing this handbook, have a look at the introductory guide to 3D.

Contained in this tutorial:

1. Comprehend Alters
2. Shift an element
3. Enlarge an element
4. Revolve an element
5. Slant an element’s proportions
6. Modify alter configurations

Overview of Alters

There are 4 kinds of alters:

1. シフト
2. Enlarge
3. 回転する
4. Slant

You can incorporate an alter or multiple alters to an element in スタイリングセクション > 影響 > 2D & 3D alters.

Shift an element

In this instance, let’s include alters to a Connection block. This will be carried out in the ホバー status:

1. 移動する セグメント から Include elements panel onto your site
2. クラスを割り当てる セグメント (e.g., “Key segment”)
3. ドラッグ Connection block から Include elements panel に セグメント you just inserted
4. クラスを割り当てる Connection block (e.g., “Connection block”) and customize it according to your preference
5. 複製する Connection block to make a total of 3
6. を選択 Connection block
7. 展開する スタイリングセクション > Selector zone そして選択する ホバー ドロップダウンから

Lets apply a シフト alter to the ホバー status of the Connection block:

1. 展開する スタイリングセクション > 影響 > 2D および 3D 変換
2. Select the plus symbol to append a new Alteration

の シフト alter is the standard choice, and the default unit for シフト values is pixels (px). You can alter the unit by clicking PX and picking your favored unit from the dropdown.

Gain further insights about 入力値と単位.

Through the シフト alter, you can tweak an element’s location to the left and right along the horizontal (X) axis. You can also tweak the location up and down along the vertical (Y) axis. Adjusting both the X and Y axes shifts the element diagonally.

Shifting the element along the Z-axis alters the element’s perceived depth. However, there won’t be an impact unless you establish a Offspring viewpoint on a precursor element initially.

In our illustration, the セグメント you inserted is the precursor element to the Connection block. Let’s tweak its Offspring viewpoint:

1. 選ぶ セグメント
2. 開ける スタイリングセクション > 影響 > 2D & 3D alters
3. Click the 3 dots to unveil Alteration Configurations
4. Revise Offspring viewpoint > 距離 to 1000 px

Now that the 子孫の視点 has been configured on the Key segment — the precursor element of the Connection block — let’s update the Z-axis value of the Connection block:

1. を選択 Connection block
2. 展開する スタイリングセクション > Selector zone
3. Tap the dropdown arrow and pick ホバー
4. スクロール 影響 > 2D & 3D alters and hit the シフト alter that you crafted previously
5. Adjust the Z value to intensify the depth perspective

Hover over any of the Connection blocks to observe the alter effect in motion — in our situation, the effect is presently too abrupt.

To smoothen the effect:

1. 選択してください Connection block and make certain it’s in the なし 状態
2. 展開する スタイリングセクション > 影響 > Shifts
3. Hit the plus symbol to append a shift
4. From the dropdown, select Alteration
5. をセットする 間隔 to 500 ms

The transformation of your Link blocks appears more fluid when hovering.

重要： When you define a transform type on an element, you can set the values for one or more of its axes. However, switching between transform types (e.g., from 動く に 規模) while configuring transform values will result in the loss of your initial settings.

To incorporate multiple transform types without losing any previous configurations, simply add another transform using the addition icon.

Modify the size of an element

Let’s introduce a separate 規模 transformation to our リンクブロック: 

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. Expand the dropdown menu and select ホバー
4. 案内する 効果 > 2D および 3D 変換 and click the addition icon to include a new transformation
5. タップして 規模 button and adjust the values for the X and Y axes

規模 transformations cause an element to visually expand if the value exceeds 1 or contract if it lies between 0 and 1. By default, the X and Y values are interconnected for proportional scaling. To adjust individual values, you can unlink the X and Y configurations by deselecting the lock icon.

Observe the effect of the 規模 transformation by hovering over the Link blocks.

重要： For a compelling 3D outcome, consider scaling along the Z-axis. This technique particularly enhances elements with children showcasing diverse Z values.

詳細はこちら 3D perspective.

Rotate an element

Prior to applying a 回転 transformation, let’s eliminate the existing 動く そして 規模 transformations:

1. 選択してください リンクブロック and ensure it’s in the ホバー 州
2. アクセス スタイルパネル > 効果 > 2D および 3D 変換
3. Hover over each transformation and select the bin icon (Delete)

Add the 回転 transformation now:

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. Expand the dropdown menu and select ホバー
4. 案内する 効果 > 2D および 3D 変換 and click the addition icon to add a new transformation
5. タップして 回転 button and make adjustments to the X, Y, and Z axes

To rotate an element clockwise or counter-clockwise, you’ll have to rotate along the Z-axis. In the absence of 3D perspective set on the parent element, the X and Y-axis rotations will seem flattened by default.

To give a more 3D appearance to the X and Y-axis rotations, activate 3D perspective — specifically the 子どもの視点 — on the parent element. In your scenario, you’ve already established the 3D perspective on the Link block’s parent element, the セクション.

Witness the impact of the 回転 transformation by hovering over the Link blocks.

Skew an element

Prior to implementing a Skew transformation, let’s remove the existing 回転 transformation:

1. 選択してください リンクブロック and ensure it’s in the ホバー 州
2. アクセス スタイルパネル > 効果 > 2D および 3D 変換
3. Hover over the existing transformation and select the bin icon (Delete)

Add the Skew transformation now:

1. 選択する リンクブロック
2. アクセス スタイルパネル > セレクターフィールド
3. Expand the dropdown menu and select ホバー
4. スクロール 効果 > 2D および 3D 変換 and click the addition icon to include a new transformation
5. タップして Skew button and adjust the values for the X and Y axes

You can adjust the shearing along the X or Y-axis using the Skew transformation. Enabling 3D perspective on the parent element won’t influence skew transformations.

Modify transform configurations

Transform configurations provide control over the fundamental options affecting all transformations applied to the element. These encompass the transform 起源, visibility settings for 背面, Self perspective, そして 子どもの視点.

You can accessAdjusting the configurations via 外観パネル > 影響 > 2D & 3D transitions is possible. You can just tap the 3 dots to unveil Modification Configurations. 

Starting Point

の ベース for modifications identifies the starting point, or axis, where the alteration takes place. Initially, the Lower is positioned at the midpoint, indicating that all adjustments will occur from the central part of the object.

Let’s fine-tune the transform Midpoint のために Hyperlink box: 

1. を選択 Hyperlink box
2. 公開 外観パネル > Identifier section
3. Choose the dropdown arrow and select ホバー
4. 下にスクロール 影響 > 2D & 3D transitions and tap the 3 dots to access Modification Configurations
5. 変更する ベース point 
6. Test your amendments by hovering over the Hyperlink box

You can define the ベース by selecting one of the locations in the ベース command. It’s also possible to manually adjust the placement by typing in the values for the horizontal placement (left) and vertical placement (top). Moreover, you can switch the measurement unit between px, % (default), vw, and vh.

If you shift the ベース to the lower right, for instance, your adjustments will commence from that position. This affects solely サイズ変更 そして Spin. 

3D Perspectives

When you haven’t specified a perspective, all 3D-compatible alterations (e.g., pivot X, pivot Y, migrate Z, and resize Z) will either exhibit a level, two-dimensional look or no impact at all. Activating a 3D perspective enables you to reposition, rotate, and resize objects in a 3D area.

You can establish a perspective on a superior element and impact all of its offspring, or just on the object itself. Additionally, you can introduce a 3D perspective to your object by defining the gap between the Z-axis and the viewer.

The gap measurement of the perspective determines the intensity of the 3D effect. For a more remarkable effect, specify a small figure (less than 1000px). This method brings the viewer closer to the Z-axis. Opt for increased values to tone down the effect.

Individualized perspective

You can assign a Personalized perspective on an object if you desire a 3D impact implemented solely to that element and its descendants. However, it’s not as lifelike as assigning a on the main object. 

To introduce a Individualized perspective:

1. Select the object you wish to influence
2. 開ける 外観パネル > 影響 > 2D & 3D transitions and tap the 3 dots to disclose Modification Configurations
3. Set a distance value for Personalized perspective

子孫の視点

Establishing an 子孫の視点 on an upper element creates a realistic 3D look on all of its dependent components.

To set an 子孫の視点 on an upper element:

1. Select the main element whose 子孫の視点 you wish to adjust
2. 公開 外観パネル > 影響 > 2D & 3D transitions and tap the 3 dots to access Modification Configurations
3. Revamp the ギャップ そして ベース for your alterations

These 3D arrangements will be applied to transform properties configured on the descendants of the superior element.

Opposite Side

Rear gives you the option to decide the visibility of the reverse side of an object.

By default, when you pivot an element 180° along the X or Y-axis, it appears inverted, as if viewed from the back. Any textual content inside the element will seem reversed as if it’s being viewed through a mirror. 

You can present or conceal the Rear portion of an element in the element’s transform configurations:

1. Choose the element you intend to adjust
2. 公開 外観パネル > 影響 > 2D & 3D transitions and tap the 3 dots to access Modification Configurations
3. Pick between 見える または 隠れた のために Rear

This feature is helpful when designing rotating cards that disclose content on the opposite side.

Now you’re ready to bring those items into motion!