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阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

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

推荐阅读更多精彩内容