第一節(jié) 2D效果
1逆甜、CSS3過(guò)渡
2虱肄、2D變形
要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：
1交煞、規(guī)定您希望把效果添加到哪個(gè)CSS屬性上
2咏窿、規(guī)定效果的時(shí)長(zhǎng)
比方說(shuō)，下面這個(gè)代碼的動(dòng)畫(huà)效果素征，規(guī)定了效果的時(shí)長(zhǎng)為2秒集嵌。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition: all 2s; }
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition-property: width; transition-duration: 2s;}
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
transition-property: width,height,background; transition-duration: 2s;
上面這一句代碼的效果等同于下面這一句：
transition: all 2s;
cubic-bezier(n,n,n,n),貝塞爾曲線取值，可以利用以下網(wǎng)站去參考：
http://cubic-bezier.com/
延遲開(kāi)始過(guò)渡效果御毅。
總體上根欧，transition的幾個(gè)屬性值，可以像以下的代碼這樣子寫(xiě)端蛆，來(lái)控制2D效果：
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; transition: all 2s linear 1s;}
.box:hover {width: 200px; height: 200px; background: #0f0;}
</style>
如下示例代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(30deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
不加transform前的位置和加了transform：translate（）之后凤粗，位置上出現(xiàn)移動(dòng)。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: translate(100px,100px);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
特別注意：元素的縮放中心點(diǎn)是元素的中心位置今豆。
簡(jiǎn)單例子如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: scale(2,4);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: skew(30deg,40deg);}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transform: rotate(-30deg);}
.box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transform: rotate(-30deg); }
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
上面的box2是采用transform-origin：left top嫌拣，對(duì)對(duì)應(yīng)的正方形進(jìn)行元素的中心點(diǎn)設(shè)置，之后進(jìn)行變換的時(shí)候呆躲，依據(jù)這個(gè)中心點(diǎn)异逐，進(jìn)行相應(yīng)的旋轉(zhuǎn)等一系列變換。
下面這一個(gè)是對(duì)上面兩種變換的進(jìn)一步的優(yōu)化歼秽，形成2D動(dòng)畫(huà)应役。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; margin: 100px auto; transition: all 1s;}
.box:hover{transform: rotate(-30deg);}
.box2{width: 100px; height: 100px; background: #0f0; margin: 200px auto; transform-origin: left top; transition: all 1s;}
.box2:hover{transform: rotate(-30deg); }
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
下面是對(duì)整個(gè)2D效果的綜合案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {width: 100px; height: 100px; border: 1px #f00 solid; margin: 100px auto; transition: all 2s;}
div:nth-child(1):hover {transform:translateX(200px); }
div:nth-child(2):hover {transform:rotate(90deg); }
div:nth-child(3):hover {transform:scale(2,0.5); }
div:nth-child(4):hover {transform:skew(30deg,30deg); }
div:nth-child(5):hover {transform:translateX(200px) rotate(90deg) scale(2,0.5) skew(30deg,30deg); }
div:nth-child(6):hover {transform:rotate(90deg) scale(2,0.5) skew(30deg,30deg) translateX(200px) ; }
div:nth-child(7):hover {transform: scale(2,0.5) rotate(90deg) skew(30deg,30deg) translateX(200px) ; }
</style>
</head>
<body>
<div>2D平移</div>
<div>2D旋轉(zhuǎn)</div>
<div>2D縮放</div>
<div>2D扭曲</div>
<div>2D綜合</div>
<div>2D綜合2</div>
<div>2D綜合3</div>
</body>
</html>
