CSS - scaleX()
The scaleX() function in CSS used to apply a scaling transformation to an element along the horizontal (X-axis) dimension. The result is a <transform-function> datatype.
The function modifies the abscissa (horizontal, X-coordinate) of element point by a constant factor. When the scale factor is 1, the function gets identity transform. scaleX(-1) specifies an axial symmetry, where the vertical axis passes through the transform origin.
Possible Values
The function scaleX() accepts a single parameter.
s: A number, representing the scaling factor to be applied on the abscissa (horizontal, x-coordinate) of each point of the element.
Syntax
transform: scaleX(s);
CSS scaleX() - Positive and Negative Values
Following is an example of scaleX() function with positive and negative values as parameter:
<html> <head> <style> div { width: 100px; height: 100px; background-image: url(images/logo.png); margin-bottom: 1em; } section { outline: 2px solid blue; width: 150px; height: max-content; } .scale-x-positive { background-image: url(images/logo.png); transform: scaleX(0.8); } .scale-x-negative { background-image: url(images/logo.png); transform: scaleX(-0.4); } .scale-x-one { background-image: url(images/logo.png); transform: scaleX(1); } .scale-x-int { background-image: url(images/logo.png); transform: scaleX(1.5); } </style> </head> <body> <section> <p>No function</p> <div></div> </section> <section> <p>scaleX(-0.4)</p> <div class="scale-x-negative"></div> </section> <section> <p>scaleX(0.8)</p> <div class="scale-x-positive"></div> </section> <section> <p>scaleX(1)</p> <div class="scale-x-one"></div> </section> <section> <p>scaleX(1.5)</p> <div class="scale-x-int"></div> </section> </body> </html>
Advertisements
To Continue Learning Please Login