Exaggerate depth using Z-scale

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

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

In this lesson: 

  1. Set a child perspective
  2. Move the z-position of child elements
  3. Scale along the z-axis
  4. Smooth everything out with a 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

  1. Click the element you’re working with
  2. In the Style panel, click the plus sign next to Transforms and adjust the z-position


Scale along the z-axis

  1. Click the element you’re working with
  2. In the Style panel, click the plus sign next to Transforms 
  3. Click Scale and adjust the z-axis (if you go too low, the element will disappear)
  4. Click the dropdown menu at the top next to States
  5. Click Hover
  6. Under Transforms, click scale and return the element to its original value (e.g., 1)

Smooth everything out with a transition

  1. In the Style panel, click the clock icon under Transitions & Transforms
  2. Choose Transform from the dropdown menu
  3. Set a duration that’s longer than 200 MS 


Check your work in preview. 


The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?