首頁 >web前端 >前端問答 >css3中scale裡面填什麼

css3中scale裡面填什麼

WBOY原創: 2022-03-16 11:12:292224瀏覽

在css3中，scale()方法裡面的第一個參數填入的是元素沿著水平方向縮放的倍數，第二個參數填入的是元素沿著垂直方向縮放的倍數，語法為「transform:scale(x,y)」。

css3中scale裡面填什麼

本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中scale裡面填什麼

scale()方法

縮放，指的是「縮小」和「放大」。在CSS3中，我們可以使用scale()方法將元素依照中心原點進行縮放。

跟translate()方法一樣，縮放scale()方法也有3種情況：

（1）scaleX(x)：元素僅水平方向縮放（X軸縮放）；

（2）scaleY(y)：元素僅垂直方向縮放（Y軸縮放）；

（3）scale(x,y)：元素水平方向和垂直方向同時縮放（X軸和Y軸同時縮放）;

1、scaleX(x)

transform:scaleX(x)

說明：

##x表示元素沿著水平方向（X軸）縮放的倍數，如果大於1就代表放大；如果小於1就代表縮小。

大家想想倍數是怎樣一個概念就很好理解了。

2、scaleY(y)

語法：

transform:scaleY(y)

說明：

##y表示元素沿著垂直方向（Y軸）縮放的倍數，如果大於1就代表放大；如果小於1就代表縮小。

3、scale(x,y)

語法：

transform:scale(x,y)

說明：

x表示元素沿著水平方向（X軸）縮放的倍數，y表示元素沿著垂直方向（Y軸）縮放的倍數。

注意，Y是一個可選參數，如果沒有設定Y值，則表示X、Y兩個方向的縮放倍數是一樣的（同時放大相同倍數）。

範例：

<!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>

在chrome瀏覽器預覽效果如下：

css3中scale裡面填什麼分析：

從上圖可以看出，元素沿著X軸方向放大了1.5倍（兩個方向同時延伸，整體放大1.5倍）。

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

當使用上面程式碼時，在瀏覽器預覽效果如下：

css3中scale裡面填什麼 #（學習影片分享：

css影片教學

）

以上是css3中scale裡面填什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css chrome css3 transform

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼取消清單的項目符號下一篇：css怎麼取消清單的項目符號

看更多