css3中scale里面的參數(shù)是什么

這篇文章主要為大家展示了“css3中scale里面的參數(shù)是什么”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css3中scale里面的參數(shù)是什么”這篇文章吧。

創(chuàng)新互聯(lián)成立10年來，這條路我們正越走越好，積累了技術與客戶資源，形成了良好的口碑。為客戶提供成都網(wǎng)站制作、網(wǎng)站建設、外貿(mào)網(wǎng)站建設、網(wǎng)站策劃、網(wǎng)頁設計、域名與空間、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網(wǎng)站建設都非常重要，創(chuàng)新互聯(lián)通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

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

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3中scale里面填什么

scale()方法

縮放，指的是“縮小”和“放大”。在CSS3中，我們可以使用scale()方法來將元素根據(jù)中心原點進行縮放。

跟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軸）縮放的倍數(shù)，如果大于1就代表放大；如果小于1就代表縮小。

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

2、scaleY(y)

語法：

transform:scaleY(y)

說明：

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

3、scale(x,y)

語法：

transform:scale(x,y)

說明：

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

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

舉例：

<!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里面的參數(shù)是什么

分析：

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

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

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

css3中scale里面的參數(shù)是什么

以上是“css3中scale里面的參數(shù)是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：css3中scale里面的參數(shù)是什么
網(wǎng)站鏈接：http://www.rwnh.cn/article24/ghccje.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、外貿(mào)網(wǎng)站建設、域名注冊、靜態(tài)網(wǎng)站、建站公司、品牌網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

css3中scale里面的參數(shù)是什么

css3中scale里面填什么