CSS - scaleZ()
The scaleZ() function in CSS is used to apply a scaling transformation (resizing) to an element along the z-axis. The result is a <transform-function> datatype.
The function modifies the z-coordinate of each element point by a constant factor, other than 1. When the scale factor is 1, the function gets identity transform. scaleZ(-1) specifies an axial symmetry, where the z-axis passes through the transform origin.
Possible values
The function scaleZ() accepts a single parameter.
s: A number, representing the scaling factor to be applied on the z-coordinate of each point of the element.
Syntax
transform: scaleZ(s);
CSS scaleZ() - Positive and Negative Values
Following is an example of scaleZ() function with positive and negative values as parameter:
<html> <head> <style> div { width: 100px; height: 100px; background-color: cyan; border: 2px solid black; } .scale-z-positive { background-color: pink; transform: perspective(800px) scaleZ(2) translateZ(-100px); } .scale-z-negative { background-color: lightgreen; transform: perspective(800px) scaleZ(-0.5) translateZ(-100px); } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>+ve scaleZ()+translateZ()</p> <div class="scale-z-positive"></div> </section> <section> <p>-ve scaleZ()+translateZ()</p> <div class="scale-z-negative"></div> </section> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google