一、2D效果
1.translate(xpx,ypx)、translateX(xpx),translateY(ypx)
右平移xpx，左平移ypx
|
<!DOCTYPE html> transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ |
結果：
2.rotate 旋轉
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
結果：
3.scale(x,y)
x > 1,寬度放大x倍；x < 1,寬度縮小x倍；
y > 1,高度放大x倍; y < 1,高度縮小y倍；
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ -ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,2); /* 標準語法 */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
結果：
放大 
縮小 
4.skew 傾斜
skewX: 相當於y軸繞中心逆時針旋轉 n°
skewY: 相當於x軸繞中心順時針旋轉 n°
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(20deg,20deg); /* Safari and Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
結果：
x=20deg,y=20deg
x=20deg 
y=20deg
5.matrix就不介紹，我沒有使用明白，等明白了在介紹
總結：
二、3D效果
1.ratateX(n deg) 按照X軸方向旋轉
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: rotateX(60deg); -webkit-transform: rotateX(60deg); /* Safari 與 Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
結果：
60度 
90度
180度
2.ratateX(n deg) 按照Y軸方向旋轉 這裏就不寫了，和上面一樣
三、過渡 transition
1.transition
transition: 屬性 n秒,屬性 n秒，屬性 n秒，屬性 n秒，屬性 n秒 ；（屬性可以是color width height transform等）
接下來展示一些我做的一個效果
要點：
①hover必要的，放上鼠標之後的效果
②transition 過渡的元素和時間設置
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { color: white; width: 50px; height: 50px; background: chartreuse; box-shadow: 0px 0px 3px aqua; } #translate1{ transition:background 1.5s, 1s, width 1s, height 1s, transform 1s; -webkit-transition:background 1.5s,font-size 1s, width 1s, height 1s, -webkit-transform 1s; } #translate1:hover{ background: #00FFFF; font-size: 25px; width: 100px; height: 100px; -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); } </style> </head> <body> <div id="translate1"> <span><b>CSS3</b></span> <br> 過渡 </div> </body> </html> |
效果：我不會做動態圖，有會的小夥伴可以教我一下，坤兒在這先謝過！（中間還有過效果看不到，可以去http://www.runoob.com/css3/css3-transitions.html來看那個圖，和我的效果一樣）
之前 
之後
2.等待屬性，鼠標放在元素上多長事件後，出現過渡效果
transition: 屬性 n秒,屬性 n秒，屬性 n秒，屬性 n秒，屬性 n秒 ，linear 2s；點擊兩秒之後，出現過渡效果。
四、動畫效果（聽炫酷的哦）
要點：
1.@keyframes 定義動畫
@keyframes myfirst{
0%{};
100%{};
}
2.animation：動畫名稱 n秒 屬性 屬性 屬性 （調用動畫）
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { color: white; width: 80px; height: 50px; position: relative; background: chartreuse; box-shadow: 0px 0px 3px aqua; animation:myfirst 5s; /*調用動畫*/ -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst{ /*定義動畫*/ 0%{ top: 0; left: 0; transform: rotate(0deg); } 10%{ top: 0; left: 0; background: #00FFFF; transform: rotate(30deg); } 30%{ top: 0; left: 0; background: #00FFFF; transform: rotate(10deg); } 50%{ top: 0; left: 200px; background: #00FFFF; transform: rotate(0deg); } 70%{ background: #00FFFF; } 100%{ left: 0px; transform: rotate(720deg); } } </style> </head> <body> <div id="translate1"> <span><b>CSS3</b></span> <br> 動畫 </div> </body> </html> |
結果：效果可以自己看，和這裏差不多 http://www.runoob.com/css3/css3-animations.html
***直接加載animation後面的屬性***
等待：linear 2s
循環：infinite 重複動畫效果
交替：alternate 按原操作，返回