css如何設定縮放

醉折花枝作酒筹原創: 2021-04-21 17:47:3731496瀏覽

在css中，可以使用transfrom屬性的scale()方法設定縮放，語法格式為「transfrom:scale(方向)」。 scale()方法用於修改元素的大小，透過向量形式定義的縮放值來放大或縮小元素，同時可在不同方向設定不同縮放值。

css如何設定縮放

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

在CSS3中，我們可以使用transform屬性的scale()方法來實現元素的縮放效果。縮放，指的是“縮小”和“放大”的意思。

語法：

transform: scaleX(x);         /*沿X轴方向缩放*/
transform: scaleY(y);         /*沿Y轴方向缩放*/
transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/

說明：

縮放有3種情況：scaleX()、scaleY()、scale()。參數x表示元素在x軸方向的縮放倍數，參數y表示元素在y軸方向的縮放倍數。

當x或y取值為0~1之間時，元素進行縮小；當x或y取值大於1時，元素進行放大。大家思考一下「倍數」的概念，很快就懂了。

範例：scaleX(x)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scaleX(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

瀏覽器預覽效果如下圖所示。

css如何設定縮放

分析：

transform:scaleX(1.5);表示元素在x軸方向放大為原來的1.5倍。若將1.5改為0.5，則元素會在x軸方向縮小為原來的0.5倍，此時預覽效果如下圖所示。

css如何設定縮放

實際上，transform:scaleX(1.5);其實可以等價於transform:scale(1.5, 0);，小夥伴們可以自行測試一下。

範例：scaleY(y)

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scaleY(1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

瀏覽器預覽效果如下圖所示。

css如何設定縮放

分析：

transform:scaleY(1.5);表示元素在y軸方向放大為原來的1.5倍。若將1.5改為0.5，則元素會在y軸方向縮小為原來的0.5倍，此時瀏覽器預覽效果如下圖所示。

css如何設定縮放

實際上，transform:scaleY(1.5);其實可以等價於transform:scale(0, 1.5);，小夥伴們可以自行測試一下。

範例：scale(x, y)

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: rgb(30, 170, 250);
            opacity: 0.6;
            transform:scale(1.2, 1.5);
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

瀏覽器預覽效果如下圖所示。

css如何設定縮放

分析：

transform:scale(1.2, 1.5);表示元素在x軸和y軸兩個方向上同時放大，x軸方向放大為原來的1.2倍，y軸方向放大為原來的1.5倍。實際上，transform:scale(1.2, 1.5);其實可以等價於以下程式碼：

transform:scaleX(1.2);
transform:scaleY(1.5);

推薦學習：css影片教學

以上是css如何設定縮放的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 transform

陳述：

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

上一篇：css如何設定li間距下一篇：css如何設定li間距

看更多