- 在
CSS3中，我們可以使用transform屬性來實(shí)現(xiàn)文字或圖像的的各種變形效果，如位移、縮放、旋轉(zhuǎn)、傾斜等
transform屬性
位移translate()
- 對于位移translate()方法，我們分為3種情況：
（1）translateX(x)：元素僅在水平方向移動(dòng)（X軸移動(dòng)）；
（2）translateY(y)：元素僅在垂直方向移動(dòng)（Y軸移動(dòng)）；
（3）transklate(x,y)：元素在水平方向和垂直方向同時(shí)移動(dòng)（X軸和Y軸同時(shí)移動(dòng)）；單位為px、em或%等
縮放scale()
- 縮放，指的是“縮小”和“放大”。在
CSS3中，我們可以使用scale()方法來將元素根據(jù)中心原點(diǎn)進(jìn)行縮放。- 跟
translate()方法一樣，縮放scale()方法也有3種情況：
（1）scaleX(x)：元素僅水平方向縮放（X軸縮放）；
（2）scaleY(y)：元素僅垂直方向縮放（Y軸縮放）；
（3）scale(x,y)：元素水平方向和垂直方向同時(shí)縮放（X軸和Y軸同時(shí)縮放）；' - 說明：
x,y表示元素沿著水平方向（X軸Y軸）縮放的倍數(shù)，如果大于1就代表放大；如果小于1就代表縮小,當(dāng)然放大和縮小是兩個(gè)方向同時(shí)延伸
- 跟
旋轉(zhuǎn)rotate()
- 在
CSS3中，我們可以使用rotate()方法來將元素相對中心原點(diǎn)進(jìn)行旋轉(zhuǎn)。這里的旋轉(zhuǎn)是二維的，不涉及三維空間的操作
語法：transform：rotate(度數(shù));
- 說明：度數(shù)指的是元素相對中心原點(diǎn)進(jìn)行旋轉(zhuǎn)的度數(shù)，單位為
deg。其中，deg是degree（度數(shù)）的縮寫
如果度數(shù)為正，則表示元素相對原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果度數(shù)為負(fù)，則表示元素相對原點(diǎn)中心進(jìn)行逆時(shí)針旋轉(zhuǎn)
傾斜skew()
- 在
CSS3中，我們可以使用skew()方法將元素傾斜顯示。skew()方法跟translate()方法、scale()方法一樣，也有3種情況：
（1）skewX(x)：使元素在水平方向傾斜（X軸傾斜）；
（2）skewY(y)：使元素在垂直方向傾斜（Y軸傾斜）；
（3）skew(x,y)：使元素在水平方向和垂直方向同時(shí)傾斜（X軸和Y軸同時(shí)傾斜）； -
skewX(deg)方法- 如果度數(shù)為正，表示元素沿水平方向（
X軸）順時(shí)針傾斜；如果度數(shù)為負(fù)，表示元素沿水平方向（X軸）逆時(shí)針傾斜。
- 如果度數(shù)為正，表示元素沿水平方向（
-
skewY(deg)方法- 如果度數(shù)為正，表示元素沿垂直方向（
Y軸）順時(shí)針傾斜；如果度數(shù)為負(fù)，表示元素沿垂直方向（Y軸）逆時(shí)針傾斜
- 如果度數(shù)為正，表示元素沿垂直方向（
-
skew(x,y)方法- 第一個(gè)參數(shù)對應(yīng)
X軸，第二個(gè)參數(shù)對應(yīng)Y軸。如果第二個(gè)參數(shù)未提供，則值為0，也就是Y軸方向上無斜切
- 第一個(gè)參數(shù)對應(yīng)
- 舉例
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3傾斜skew()方法</title>
<style type="text/css">
/*設(shè)置原始元素樣式*/
#origin
{
margin:100px auto;/*水平居中*/
width:200px;
height:100px;
border:1px dashed silver;
}
/*設(shè)置當(dāng)前元素樣式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:skewX(30deg);
-webkit-transform:skewX(30deg); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:skewX(30deg);/*兼容-moz-引擎瀏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
在瀏覽器效果
- 對于初學(xué)者，可能一時(shí)半會看不出
skewX()方法的本質(zhì)原理。其實(shí)skewX()方法變形原理是這樣的：由于我給元素限定了高度為100px，而skewX()方法是沿著X軸方向傾斜。所以，只要傾斜角度不是180°，元素都會保持100px的高度。同時(shí)為了保持傾斜，只能沿著X軸拉長本身。
由此我們可以總結(jié)：
（1）skewX()方法會保持高度，沿著X軸傾斜；
（2）skewY()方法會保持寬度，沿著Y軸傾斜；
（3）skew(x,y)方法會先按照skewX()方法傾斜，然后按照skewY()方法傾斜；
transform:skewY(30deg);
-webkit-transform:skewY(30deg); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:skewY(30deg); /*兼容-moz-引擎瀏覽器*/
-
當(dāng)采用上述代碼時(shí)，在瀏覽器預(yù)覽效果如下：
瀏覽器效果 - 學(xué)過點(diǎn)基本數(shù)學(xué)的人都知道，位移、旋轉(zhuǎn)和傾斜都不會改變四邊形的面積。
skew()方法可能比較少用。不過用的好的話，會讓你的網(wǎng)頁美觀動(dòng)感，但是用得不好的話，則將是一大敗筆
中心原點(diǎn)transform-origin
- 任何一個(gè)元素都有一個(gè)中心原點(diǎn)，默認(rèn)情況下，元素的中心原點(diǎn)位于
X軸和Y軸的50%處。默認(rèn)情況下，CSS3變形進(jìn)行的位移、縮放、旋轉(zhuǎn)、傾斜都是以元素的中心原點(diǎn)進(jìn)行變形 - 在
CSS3中，我們可以通過transform-origin屬性來改變元素變形時(shí)的中心原點(diǎn)位置
語法：transform-origin:取值;
說明：transform-origin屬性取值有2種：一種是采用長度值，另外一種是使用關(guān)鍵字。長度值一般使用百分比作為單位，很少使用px、em等作為單位
transform-origin屬性取值
- 舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS3中心原點(diǎn)transform-origin屬性</title>
<style type="text/css">
/*設(shè)置原始元素樣式*/
#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-origin:right center;/*設(shè)置中心圓點(diǎn)靠右居中*/
-webkit-transform-origin:right center;/*兼容-webkit-引擎瀏覽器*/
-moz-transform-origin:right center; /*兼容-moz-引擎瀏覽器*/
transform:rotate(30deg);
-webkit-transform:rotate(30deg); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:rotate(30deg); /*兼容-moz-引擎瀏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>
瀏覽器效果
