使用 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 的最新帖子 (查看全部)