Create a hover effect by scaling along the z-axis for an explosive, attention-grabbing transition.
Set a child perspective
In the Style panel, set the Children Perspective (e.g., to 1000 pixels).
Move the z-position of child elements
- Click the element you’re working with
- In the Style panel, click the plus sign next to Transforms and adjust the z-position
Scale along the z-axis
- Click the element you’re working with
- In the Style panel, click the plus sign next to Transforms
- Click Scale and adjust the z-axis (if you go too low, the element will disappear)
- Click the dropdown menu at the top next to States
- Click Hover
- Under Transforms, click scale and return the element to its original value (e.g., 1)
Smooth everything out with a transition
- In the Style panel, click the clock icon under Transitions & Transforms
- Choose Transform from the dropdown menu
- Set a duration that’s longer than 200 MS
Check your work in preview.