使用 Z 軸放大深度

透過沿著 z 軸縮放來創建懸停效果,以實現爆炸性的、引人注目的過渡。

Exploring in this module: 

  1. Establish a child perspective
  2. Adjust the z-position of child elements
  3. Modify along the z-axis
  4. Polish transitions for coherence

Establish a child perspective

In the Style section, define the Children Perspective (e.g., about 1000 pixels).

Adjust the z-position of child elements

  1. Select the element under consideration
  2. In the Style section, expand Transforms by clicking the plus sign and fine-tune the z-position

Modify along the z-axis

  1. Select the element under consideration
  2. In the Style section, expand Transforms using the plus sign 
  3. Access the Scale option and adjust the z-axis (if too minimal, the element may vanish)
  4. Click on the menu atop beside States
  5. Select Hover
  6. Within Transforms, adjust the scale back to its initial value (e.g., 1)

Polish transitions for coherence

  1. In the Style section, click the clock icon under Transitions & Transforms
  2. Opt for Transform from the menu
  3. Choose a duration exceeding 200 MS 

Evaluate your progress in the preview. 

麥伊凡
Ewan Mak 的最新帖子 (看全部)