Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the parameters of scale in css3", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "what are the parameters of scale in css3?"

In css3, the first parameter in the scale () method fills the multiple of the horizontal scaling of the element, and the second parameter fills the multiple of the vertical scaling of the element, with the syntax of "transform:scale (xforce y)".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is filled in scale in css3

Scale () method

Zoom refers to "zoom out" and "zoom in". In CSS3, we can use the scale () method to scale the element according to the central origin.

Like the translate () method, the zoom scale () method has three situations:

(1) scaleX (x): elements are scaled horizontally only (X-axis scaling)

(2) scaleY (y): elements are scaled vertically only (Y-axis scaling)

(3) scale (xQuery): elements are scaled horizontally and vertically (X and Y axes are scaled simultaneously)

1. ScaleX (x)

Grammar

Transform:scaleX (x)

Description:

X represents the multiple by which the element is scaled horizontally (the X axis). If it is greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.

It is easy to understand when you think about the concept of multiples.

2. ScaleY (y)

Syntax:

Transform:scaleY (y)

Description:

Y represents the multiple by which the element is scaled vertically (the Y axis). If it is greater than 1, it is zoomed in; if it is less than 1, it is zoomed out.

3. Scale (XBI y)

Syntax:

Transform:scale (XBI y)

Description:

X represents the multiple of scaling of the element in the horizontal direction (X axis), and y represents the multiple of scaling of the element in the vertical direction (Y axis).

Note that Y is an optional parameter, and if the Y value is not set, it means that the magnification in both X and Y directions is the same (and magnify the same multiple at the same time).

For example:

CSS3 scaling scale () usage / * set the original element style * / .main {margin:100px auto;/* horizontal center * / width:300px; height:200px; border:1px dashed gray;} / * set the current element style * / # jb51 {width:300px Height:200px; color:white; background-color: # 3EDFF4; text-align:center; transform:scaleX (1.5);-webkit-transform:scaleX (1.5); / * compatible-webkit- engine browser * /-moz-transform:scaleX (1.5) / * compatible-moz- engine browser * /} / * for easy comparison * / # jbzj {width:300px; height:200px; color:white; background-color: # 3EDFF4; text-align:center;} 1 2

The preview effect in the chrome browser is as follows:

Analysis:

As you can see from the image above, the element is magnified 1.5 times along the X axis (extending in both directions, magnifying 1.5 times as a whole).

Transform:scaleY (1.5);-webkit-transform:scaleY (1.5); / * compatible-webkit- engine browser * /-moz-transform:scaleY (1.5); / * compatible-moz- engine browser * /

When using the above code, the preview effect in the browser is as follows:

The above is all the content of the article "what are the parameters in scale in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.