CSS3 轉換（1）：2D

知識點：
CSS3 Transform
CSS3 2D轉換
CSS3 3D轉換
CSS3 Transform與坐標系統
CSS3 矩陣
CSS3 擴展屬性

一、CSS3 Transform

CSS3的變形（Transform）屬性

讓元素在一個坐標系統中變形。這個屬性包含一系列變形函數，可以移動、旋轉和縮放元素。
【語法】

transform：none | <transform-function> [<transform-function> ]*;

【默認值】
transform:none;
【兼容性】
IE12+、FireFox16+、chrome36+、Safari16+、Opera23+

二、CSS3 2D轉換

CSS3 rotate()
CSS3 translate()
CSS3 scale()
CSS3 skew()
CSS3 matrix()

1.旋轉rotate

通過制定的角度參數對原元素制定一個2D rotate（2D旋轉）。
【語法】

transform:rotate(<angle>);

【參數說明】
angle指旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉。

rotate案例：

rotate

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style type="text/css">
* { margin: 0; padding: 0; list-style-type: none; }
a,
img { border: 0; }
body { font: 12px/180% Arial; }
.main { width: 1000px; margin: 50px auto; position: relative; }
.pic { width: 300px; height: 290px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 3px #aaa; }
.pic img { margin: 10px 0 0 8px; width: 285px; }
.pic p { text-align: center; font-size: 20px; }
.pic1 {
    -webkit-transform: rotate(7deg);
       -moz-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
         -o-transform: rotate(7deg);
            transform: rotate(7deg);
}
.pic2 {
    -webkit-transform: rotate(-8deg);
       -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
         -o-transform: rotate(-8deg);
            transform: rotate(-8deg);
}
.pic3 { position: absolute; top: 40px; left: 350px; z-index: 2;
    -webkit-transform: rotate(-35deg);
       -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
         -o-transform: rotate(-35deg);
            transform: rotate(-35deg);
}
.pic4 { position: absolute; top: 360px; left: 350px; z-index: 3;
    -webkit-transform: rotate(35deg);
       -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
            transform: rotate(35deg);
}
.pic5 { position: absolute; top: 150px; left: 600px; z-index: 4;
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}
.pic6 { position: absolute; top: 180px; left: 280px; z-index: 5;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="main">
    <div class="pic pic1">![](images/1.jpg)<p>2D轉換</p></div>
    <div class="pic pic2">![](images/2.jpg)<p>2D轉換</p></div>
    <div class="pic pic3">![](images/3.jpg)<p>2D轉換</p></div>
    <div class="pic pic4">![](images/4.jpg)<p>2D轉換</p></div>
    <div class="pic pic5">![](images/5.jpg)<p>2D轉換</p></div>
    <div class="pic pic6">![](images/6.jpg)<p>2D轉換</p></div>
</div>
</body>
</html>

2.移動translate

translate()方法，根據左（X軸）和頂部（Y軸）位置給定的參數，從當前元素位置移動。

【三種情況】
translateX(x)僅水平方向移動（X軸移動）;
translateY(Y)僅垂直方向移動（Y軸移動）;
translate(x, y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）。

1).translateX(<translation-value>)

通過給定一個X方向上的數目指定一個translation。
【語法】

transform:translateX(<translation-value>);

2).transform:translateY(<translation-value>);

通過給定一個Y方向上的數目指定一個translation。
【語法】

transform:translateY(<translation-value>);

【備注】

deg是角度；
translate-value必須是準確的數值，top類方向詞無效果；
X軸的正方向是從左到右，Y軸正方向是從上到下。

3).translate(<translation-value>[, <translation-value>])

通過矢量[tx, ty]指定一個2D translation, tx是第一個過渡值參數, ty是第二個過渡值參數選項。
【語法】

transform: translate(<translation-value>[, <translation-value>])

translate案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: translate(200px, 100px);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

【備注】：

第一個是X的值，第二個Y的值可以省略，默認值為0。

3.縮放scale

scale()方法，指定對象的2D scale（2D縮放）。

【三種情況】
scaleX(x)元素僅水平方向縮放（X軸縮放）;
scaleY(y)元素僅垂直方向縮放（Y軸縮放）;
scale(x, y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。

1).scaleX(<number>)

使用[sx, 1] 縮放矢量執行縮放操作，sx為所需參數。

【語法】

transform: scaleX(<number>);

scaleX案例：

scaleX案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleX(.5);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

2).scaleY(<number>)

使用[sy, 1] 縮放矢量執行縮放操作，sy為所需參數。

【語法】

transform: scaleY(<number>);

scaleY案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scaleX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: scaleX(.5);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

3).scale(<number>[, <number>])

提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。

【語法】

transform: scale(<number>[, <number>]);

【備注】

以中心縮放；
1是正常大小，小于1是縮小，大于1是放大；不需要單位。
注意：第二個參數省略了并非是0 ，而是等同第一個參數。即等比例，不變形。

4.扭曲skew

skew()方法，指定對象skew transformation（斜切扭曲）。
【三種情況】
skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）;
skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）;
skew(x, y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）。

1).skewX(<angle>)

按給定的角度沿X軸指定一個skew transformation（斜切變換）。
【語法】

transform: skewX(<angle>);

skewX案例：

skewX案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skewX</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skewX(15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

2).skewY(<angle>)

按給定的角度沿Y軸指定一個skew transformation（斜切變換）。
【語法】

transform: skewY(<angle>);

skewY案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skewY</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skewY(15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

【備注】：

skewX
正值：逆時針
負值：順時針

skewY
正值：順時針
負值：逆時針

其中180deg 和0deg 效果一樣

3).skew(<angle> [, <angle>])

X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。
【語法】

transform: skew(<angle> [, <angle>]);

skew(<angle> [, <angle>])案例

skew(<angle> [, <angle>])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>skew</title>
<style type="text/css">
div { width: 1500px; height: 250px; background: #abcdef; margin: auto; }
div > img {
    transform: skew(15deg, 15deg);
}
</style>
</head>
<body>
<div>![](images/sprite.jpg)</div>
</body>
</html>

備注：

第二個參數可以省略，當只有一個參數時，默認值是0.

5.矩陣matrix

以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換。
相當于直接應用一個[a,b,c,d,e,f]變換矩陣。

【語法】

transform: matrix(a, c, b, d, tx, ty);

【參數說明】
tx, ty就是就是基于X和Y坐標重新定位元素。

最后編輯于：2017.12.05 06:31:43

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,983評論 6贊 537
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,772評論 3贊 422
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
開封第一講書人閱讀 176,947評論 0贊 381
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,201評論 1贊 315
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,960評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,350評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,406評論 3贊 444
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,549評論 0贊 289
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,104評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,914評論 3贊 356
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,089評論 1贊 371
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,647評論 5贊 362
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,340評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,753評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,007評論 1贊 289
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,834評論 3贊 395
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,106評論 2贊 375

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

CSS3 轉換（1）：2D

CSS3 轉換（1）：2D

一、CSS3 Transform

CSS3的變形（Transform）屬性

二、CSS3 2D轉換

1.旋轉rotate

rotate案例：

2.移動translate

1).translateX(<translation-value>)

2).transform:translateY(<translation-value>);

3).translate(<translation-value>[, <translation-value>])

translate案例

3.縮放scale

1).scaleX(<number>)

scaleX案例：

2).scaleY(<number>)

scaleY案例

3).scale(<number>[, <number>])

4.扭曲skew

1).skewX(<angle>)

skewX案例：

2).skewY(<angle>)

skewY案例

3).skew(<angle> [, <angle>])

skew(<angle> [, <angle>])案例

5.矩陣matrix

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

CSS3 轉換（1）：2D

一、CSS3 Transform

CSS3的變形（Transform）屬性

二、CSS3 2D轉換

1.旋轉rotate

rotate案例：

2.移動translate

1).translateX(<translation-value>)

2).transform:translateY(<translation-value>);

3).translate(<translation-value>[, <translation-value>])

translate案例

3.縮放scale

1).scaleX(<number>)

scaleX案例：

2).scaleY(<number>)

scaleY案例

3).scale(<number>[, <number>])

4.扭曲skew

1).skewX(<angle>)

skewX案例：

2).skewY(<angle>)

skewY案例

3).skew(<angle> [, <angle>])

skew(<angle> [, <angle>])案例

5.矩陣matrix

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

一、CSS3 Transform