In CSS, transform is one of the advanced features that allows you to apply various transformations to a selected element. One of the key functions in transform is the scaleY() function, which allows you to change the vertical size of an element without affecting its horizontal size. By using this function, you can resize the element vertically without adjusting its width.
This function is quite useful, especially when you want to make an element visually appealing on a web page without affecting its original state. For example, you can increase the height of a box based on user interaction to attract more attention.
Using scaleY() in CSS is quite straightforward. All you need to do is set the scaleY variable to the value you want to adjust the vertical size accordingly. A value of 1 keeps the original size of the element, and any value below or above will decrease or increase the size, respectively.
It is better for ensuring the correct effect of scaleY() in different circumstances to always use prefixes when working with various browsers. This helps you ensure that the intended presentation is achieved across all browsers.
Example Code Using scaleY
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.5s;
}
.box:hover {
transform: scaleY(1.5);
}
</style>
<div class="box"></div>
Line by Line Code Explanation
<style>Here we define our own CSS styles.
.boxWe have defined a class called box that includes size and background properties.
width: 100px;This line sets the width of the element to 100 pixels.
height: 100px;This line sets the height of the element to 100 pixels.
background-color: red;The background color of the element is set to red.
transition: transform 0.5s;This sets the duration for the transform changes to 0.5 seconds.
.box:hoverWhen the mouse hovers over the element, this style will be applied.
transform: scaleY(1.5);This changes the vertical size of the element to 1.5 times its original size.
</style>This ends the definition of CSS styles.
<div class="box"></div>This creates a div element with the box class.