What to fill in scale in css3-Front-end Q&A-php.cn

What to fill in scale in css3

WBOY

Release： 2022-03-16 11:12:29

Original

2224 people have browsed it

In CSS3, the first parameter in the scale() method fills in the multiple of the element scaling along the horizontal direction, and the second parameter fills in the multiple of the element scaling along the vertical direction. The syntax is: "transform:scale(x,y)".

What to fill in scale in css3

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

What to fill in scale in css3

scale() method

Scale refers to "zoom in" and "zoom in". In CSS3, we can use the scale() method to scale elements based on the center origin.

Similar to the translate() method, the scale() method also has three situations:

(1) scaleX(x): The element is only scaled horizontally (X-axis scaling);

(2) scaleY(y): The element is scaled in the vertical direction only (Y-axis scaling);

(3) scale(x,y): The element is scaled in both the horizontal and vertical directions (X-axis scaling) Scale simultaneously with the Y axis);

1, scaleX(x)

Syntax

transform:scaleX(x)

Copy after login

Description:

x represents the element The zoom factor along the horizontal direction (X-axis). If it is greater than 1, it means zooming in; if it is less than 1, it means zooming out.

It will be easy to understand if you think about the concept of multiples.

2, scaleY(y)

Syntax:

transform:scaleY(y)

Copy after login

Description:

y means that the element is along the vertical direction (Y Axis) The zoom factor. If it is greater than 1, it means zooming in; if it is less than 1, it means zooming out.

3. scale(x,y)

Syntax:

transform:scale(x,y)

Copy after login

Description:

x means that the element is along the horizontal direction (X-axis) scaling factor, y represents the scaling factor of the element along the vertical direction (Y-axis).

Note that Y is an optional parameter. If the Y value is not set, it means that the scaling factors in the X and Y directions are the same (magnifying the same factor at the same time).

Example:

<!DOCTYPE html>
<html>
<head> 
    <title>CSS3缩放scale()用法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏览器*/
        }
        /*普通方便对比*/
         #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">1</div>
    </div>
    <div class="main">
        <div id="jbzj">2</div>
    </div>
</body>
</html>

Copy after login

The preview effect in the chrome browser is as follows:

What to fill in scale in css3

Analysis:

You can see it from the picture above It can be seen that the element is enlarged 1.5 times along the X-axis direction (extended in both directions at the same time, the overall enlargement is 1.5 times).

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎浏览器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎浏览器*/

Copy after login

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

What to fill in scale in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of What to fill in scale in css3. For more information, please follow other related articles on the PHP Chinese website!