DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 9.3 縮放scale()方法
9.3 縮放scale()方法
編輯:CSS3基礎     

一、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 xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3縮放scale()方法</title>
    <style type="text/css">
        /*設置原始元素樣式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed gray;
        }
        /*設置當前元素樣式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎浏覽器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎浏覽器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

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

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

當使用上面代碼時,在浏覽器預覽效果如下:

大家在“在線測試”中自行修改代碼體驗一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved