Trending October 2023 # Top 5 Examples Of Scale() Function In Css # Suggested November 2023 # Top 12 Popular

You are reading the article Top 5 Examples Of Scale() Function In Css updated in October 2023 on the website Vibergotobrazil.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 Top 5 Examples Of Scale() Function In Css

Introduction to CSS Scale()

A CSS scale() function is defined as a CSS Transformation property which allows resizing an element in the Two-dimensional Plane. It is used to increase or decrease the size of an element. When applying a scale transformation, it is necessary to provide instructions to the browser regarding the numbers that need resizing. Therefore, this scale() zooms in and out of the elements. A vector in a plane defines the scaling number. We can resize the dimensions at any different scale with the help of a CSS data type called transform-function.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax

The Scaling() function applies scaling in all directions by utilizing two or one value that specifies the desired scaling to be applied. The general syntax for the Scaling() function is as follows:

scale( sx ) ;

The other syntax with two arguments is:

scale(sx,sy);

Here

sx – The element resizes horizontally.

sy – The element resizes vertically.

Example:

This shrinks its size to half

.bb { Transform:scale(0.6); } Next sample double the Y-Axis: .bb {

So, the first thing we do is to create an HTML page for an element and to apply special effects using CSS3. Please ensure that when you apply scaling to an image, the original dimension of the image is greater than the size at which you perform the scaling. If you provide a value greater than one, the element will be scaled upwards in the specified direction, resulting in a larger appearance. If the specified number is one then it remains unchanged. And next, if you have a value within the zero range, you scale the element downwards. It is important to note that negative values are allowed here, but they do not perform any scaling. instead, they flip in any direction.

How Does the scale() Method Work in CSS?

Below are the scale() function and its description:

scale() function Description

Transform:scale(3);

Transform: scale(0.5);

Here the value 3 would transform the size to 3 times its original image size.

And the value 0.5 transforms the size to half of its original image size.

Transform: scale(0); Scaled out of the plane and not visible.

Transform: scale(3,1); The horizontal size is scaled up by three, and the vertical is unchanged

Examples to Implement scale() Function in CSS

The following section creates a Sample code that outlines the HTML page, and the CSS is embedded inside the head.

Example #1

Code:

img { -webkit-transform: scale (1.5); -moz-transform: scale (1.5); -ms-transform: scale (2); transform: scale(1.5); opacity: 0.7; } .new{ margin: 60px; width:105px; height:120px; background: url(“sas-img.png”) no-repeat; }

Output:

Explanation: We have created a Class ‘new’ and assigned CSS Properties to the image. So now we have applied scaling to the image, and the resulting output is presented below:

Example #2

div.box { width:150px; height:90px; background-color:#FFA07A; margin-left:150px; margin-top:150px; position:relative; } div.boxenlarge { transform: scale(1, 4); -moz-transform: scale(1, 4); -ms-transform: scale(1, 4); -webkit-transform: scale(1, 4); -o-transform: scale(1, 4); } Scaling up top and bottom

Output:

Explanation: In the above code, we apply scaling when a user presses the box over an element by rolling the mouse. So, as we move over the element, the additional class names mask the class names. We define the dimensions to achieve a desirable effect on the transforms through CSS. Moving on to the transformation part, we apply a Scale of 1 along the X-axis and 4 along the Y-axis. The element’s width grows by a factor of 1, and its weight increases by a factor of 4.

Example #3

Code:

.scalehov { width: 100px; transition: all .4s ease-in-out; } .scalehov:hover { transform: scale(1.5); }

Output:

Example #4

Code:

div { display: inline-block; overflow: hidden; } div img { display: block; transition: 2s; } div img:hover { transform: scale(1.6); }

Output:

Explanation: Therefore, in the above code, I have created three image files; when we act by moving on the image, The picture gradually increases its size. Here we perform Scaling evenly in all dimensions as we specify a single value of ‘1.6’.

Example #5

Choosing scaling value individually with both X-axis. Assigns a negative value here.

Code:

Scale_1.html

.css

.module{ font-family: Arial, Helvetica, sans-serif; width: 90%; height: 90%; display: inline-flex; justify-content: right; align-items: center; perspective: 30px; } .object { width: 5em; height: 5em; padding: 2em; margin: 1.5em; text-align: center; background-color: #FFF000; border-top: 0.4em solid greenyellow; box-shadow: 2px 2px 5px 0px royalblue; } .object { transform: scale(-0.66, -0.6); }

Output:

The result below shows the element upside down as the scaling value is negative.

Conclusion

Therefore, the examples provided here work well in all the browsers which are useful today by all web developers. The scaling () function with the help of CSS Transitions works well and effectively as this function allows to create of interactive pages. And finally, this CSS3 scale makes different spectacular effects in the HTML document by changing the properties of an image. Recent research has been done with the transition on animations where we can perform scale properties, but it is quite problematic when accessing the website.