scaleZ() transforms an element by resizing (scaling) it three-dimensionally from a fixed point along the z-axis.
A three-dimensional Cartesian coordinate system showing the X-, Y-, and
Z-axis
Note
“Transform origin” is the fixed point from which the computer scales an element.
You can define your element’s fixed point using the CSS transform-origin property. But the default is center
.
Syntax of the CSS scaleZ()
Function
scaleZ()
accepts a single argument . Here is the syntax:
transform : scaleZ (number);
Note the following:
The scaleZ(number)
function is equivalent to scale3d(1, 1, number)
.
The number
argument specifies the element’s scaling factor along the z-axis.
Whenever you include scaling or zooming animations in your app, provide users an option to turn off animations. This option is necessary because scaling and zooming animations cause accessibility issues .
Examples of the CSS scaleZ()
Function
We often use scaleZ()
with other CSS functions such as perspective()
, translateZ()
, and rotateX()
. Below are some examples.
How to use scaleZ()
with CSS perspective()
and rotateX()
functions
transform : perspective ( 370 px ) scaleZ ( 5 ) rotateX ( 17 deg );
src = " https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg "
Try Editing It
Here’s what we did in the snippet above:
We used the perspective()
function to define a 370px
distance between the user and the z=0 plane .
The scaleZ()
function specifies a scale factor of 5
for the image along the z-axis.
We used the rotateX()
function to rotate the image seventeen-degree (17⁰) around the x-axis.
Note
List perspective()
first whenever you chain it with other CSS transform
functions . Otherwise, browsers might transform the selected element incorrectly.
List the scaleZ()
function before rotateX()
. Otherwise, the browser will not scale the element.
CodeSweetly ads Learn CSS Grid with Images Use beautiful images to learn CSS Grid.
Find out more
How to use scaleZ()
with CSS perspective()
and translateZ()
functions
transform : perspective ( 370 px ) scaleZ ( 5 ) translateZ ( 30 px );
src = " https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg "
src = " https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg "
Try Editing It
Here’s what we did in the snippet above:
We used the perspective()
function to define a 370px
distance between the user and the z=0 plane .
The scaleZ()
function specifies a scale factor of 5
for the image along the z-axis.
We used the translateZ()
function to reposition the second-image
thirty pixels (30px
) away from its original position along the z-axis.
Note
List perspective()
first whenever you chain it with other CSS transform functions . Otherwise, browsers might transform the selected element incorrectly.
List the scaleZ()
function before translateZ()
. Otherwise, the browser will not scale the element.