時光轉眼即逝，又到周六了，今天寫點某部分人看不起的css玩玩！ 轉換 轉換屬性transform: 瀏覽器首碼: -webkit-transform;-o-transform;-moz-transform;-ms-transform; 取值： none : 預設值，沒有轉換操作 transform- ...
時光轉眼即逝，又到周六了，今天寫點某部分人看不起的css玩玩！
轉換
轉換屬性transform:
瀏覽器首碼:
-webkit-transform;-o-transform;-moz-transform;-ms-transform;
取值：
none : 預設值，沒有轉換操作
transform-function:一組轉換函數
transform:函數1() 函數2() ......;
轉換的原點transform-origin
在不指定原點前提前，預設原點為元素的中心處
取值：數值/百分比/關鍵字
一個值：所有軸位置
兩個值：表示x軸和y軸
三個值：表示x軸，y軸，z軸
2D轉換
2D位移
函數:translate()
取值：
translate(x) : 只做x軸(橫向)移動
translate(x,y) : 做x軸和y軸的移動
方向：看符號
+ 向右、向下
- 向左、向上
註意：
取值可以為數值或百分比、負數
單向位移函數:
translateX(x) : 只做x軸移動
translateY(y) : 只做y軸移動
縮放
改變元素的尺寸
函數:scale()
取值：
1個值：表示第一個值和第二個值是相等的
2個值：第一個 x 第二個 y
單向縮放函數：
scaleX(x),scaleY(y)
取值:
預設值 為1
縮小：0-1之間的小數
放大：大於1的數值
旋轉
函數：rotate()
取值：rotate(ndeg)
n : 具體角度值
n為正， 則順時針旋轉
n為負， 則逆時針旋轉
傾斜
函數：skew()
skewx() --x軸傾斜
skewy() --y軸傾斜
過渡
過渡屬性
作用：指定元素在哪些css屬性上的變化會產生過渡的效果（必須的）
屬性：transition-property
取值：none | all | property
eg:transition-property:background;
eg:transition-property:background,width,height;
過渡時間
作用：指定過渡效果在多長時間內完成。
註意：可以以 s | ms 為單位.該屬性不能省略，一旦省略則沒有過渡效果
屬性：transition-duration
取值：s|ms
eg:transition-duration:5s;
eg:transition-duration:5s,1s,1s;
過渡時間速度曲線函數
作用：定義整個過渡效果的速率。比如 先快後慢，還是 先慢後快，或者還是勻速
屬性:transition-timing-function
取值：預定義值或貝塞爾曲線
ease : 預設值，慢速開始，快速變快，以慢速結束
linear:勻速
ease-in：慢速開始，加速效果
ease-out:慢速結束(快速開始),減速效果
ease-in-out:慢速開始和結束，中間先加後減
eg:transition-timing-function:linear;
過渡延遲
作用：激發過渡操作後，等待多長時間後才開始執行過渡效果
屬性:transition-delay
取值：以 s | ms為單位的時間
eg:transition-delay:5s;
簡寫過渡屬性 transition
屬性：transition
取值：以空格分開的值列表
property duration timing-function delay;
eg:transition:background 1s linear 0s;
transition:background 1s;
多個過渡效果:
transition : background 1s linear 0s,
color 2s linear 0s,
border-radius 3s linear 1s;
動畫
這裡就提下註意的地方：
@keyframes語法：（單獨寫，在選擇器外，style內）
@keyframes name{
from {css樣式；}
percent{css樣式；}
to {css樣式；}
}
animation語法：（寫在選擇器內）
animation：name duration timing-function delay iteration-count direction；
animation-fill-mode
（ie10+）屬性規定動畫在播放之前或之後，其動畫效果是否可見。
none --不改變預設行為。
forwards-- 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards --在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值 （在第一個關鍵幀中定義）。
both --向前和向後填充模式都被應用。
說的也差不多了，直接上代碼！
<!DOCTYPE html> <html> <head> <title>css3 transition animation nick </title> <meta charset="utf-8" /> <style> body{background-color:#b2b2b2;} /*2d*/ #d2{ width:500px; margin:auto; } div[id^='img']{width:300px;height:300px;background-color:yellow;} #nav{margin:10px auto;} #nav a{ padding:3px 10px; background:#666; color:#fff; font-weight:bold; border-radius:5px; } #showImg{ width:400px; height:350px; border:1px solid #333; text-align:center; margin-top:20px; /*相對定位*/ position:relative; } #showImg div{ display:none; } #showImg div:target{ display:block; } #showImg #img1:target{ display:block; /*絕對定位*/ position:absolute; top:0px; -webkit-animation:sliderLeft 3s linear; } /*定義動畫*/ @-webkit-keyframes sliderLeft{ from{ left:-350px; } to{ left:0px; } } #showImg #img2:target{ -webkit-animation:sliderBottom 3s linear; animation-fill-mode:forwards ; } @-webkit-keyframes sliderBottom{ from{ transform:skew(0deg,0deg); } to{ transform:skew(45deg,30deg); } } #showImg #img3:target{ -webkit-animation:scaleIn 3s linear 0s; } @-webkit-keyframes scaleIn { from{ transform:scale(0); } to{ transform:scale(1); } } #showImg #img4:target{ -webkit-animation:rotateScale 3s linear; } @-webkit-keyframes rotateScale{ from{ transform:scale(0) rotate(0deg); } to{ transform:scale(1) rotate(360deg); } } /*3d*/ p{text-align:center} #stage{ width:800px; height:500px; border-radius:50%; margin:0 auto; border:1px solid blue; position:relative; -webkit-perspective:1200px; /*被嵌套元素的顯示模式*/ transform-style:preserve-3d; transform:perspective(1200px) rotatex(0deg) rotatey(0deg); background-color: #4cd964; } #stage div{ width:100px; height:100px; line-height:100px; border-radius:50%; background:red; position:absolute; left:350px; top:270px; text-align:center; font-size:26px; color:yellowgreen; } #stage div:nth-child(1){ transform:rotatey(0deg) translatez(200px); } #stage div:nth-child(2){ transform:rotatey(60deg) translatez(200px); } #stage div:nth-child(3){ transform:rotatey(120deg) translatez(200px); } #stage div:nth-child(4){ transform:rotatey(180deg) translatez(200px); } #stage div:nth-child(5){ transform:rotatey(240deg) translatez(200px); } #stage div:nth-child(6){ transform:rotatey(300deg) translatez(200px); } @keyframes rotate3d { from{ transform:perspective(1000px) rotatex(0deg) rotatey(0deg) rotatez(0deg); } to{ transform:perspective(1000px) rotatex(-180deg) rotatey(-180deg) rotatez(180deg); } } #stage:hover{ animation:rotate3d 5s linear infinite; /*animation-fill-mode:forwards ;*/ } </style> </head> <body> <!--2d--> <div id="d2"> <div id="showImg"> <div id="img1"></div> <div id="img2"></div> <div id="img3"></div> <div id="img4"></div> </div> <div id="nav"> <a href="#img1">2D位移動畫</a> <a href="#img2">2D傾斜動畫</a> <a href="#img3">2D縮放動畫</a> <a href="#img4">2D縮放旋轉動畫</a> </div> </div> <!--3d--> <p>滑鼠懸停預覽3d效果</p> <div id="stage"> <div>WEB</div> <div>NICK</div> <div>WEB</div> <div>NICK</div> <div>WEB</div> <div>NICK</div> </div> </body> </html>View Code
最後展示下效果！
