Magnify depth with Z-scale

Create a hover effect by scaling along the z-axis for an explosive, attention-grabbing transition.

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