css3 三大王 transition , transform , animation

標籤：撲克   com   nsf   自己   transform   cti   lex   lte   top   

三大王  transition : 過渡     , transform : 變形  ,   animation ： 動畫　　　　1.transform  變形                               

　　　　　　任何的變形都可以被過渡   ， 一個transform寫多個用空格隔開 ，分開寫可能會被覆蓋,

　　　　　　想要實現3d效果要給父元素添加景深 eg:  perspective:500px; perspective-origin

　　　　　　<1> transform: rotate(90deg)  

　　　　　　　　 意思是順時針‘旋轉’ 90度   ，  deg是單位度    可以是負數  , rotateX(45deg)x軸旋轉45度,正向後，負向前， rotateY 同理,配合 transform-origin:0% 0px; 兩個參數表示x ，y軸的最大景深 

　　　　　　<2>transform:scale(0.1，0.1)           意思是縮放0.1倍  ，兩個參數分別是x，y軸的縮放倍數，也可以拆開寫 scaleX ，scaleY   、

　　　　　　<3>transform:skew(10deg,10deg)    意思是把元素斜切，好似把正方形變成平行四邊形  ，兩個參數分別是 x軸斜切的度數，y軸斜切的度數，也可以拆開寫 skewX，skewY

　　　　　<4>transform:translateX(300px);    意思是 從x軸 移動300px    還可以是    translateY   ，Z   

　　　　　　　　transform:translate3D(100px,200px,300px);

　　　　　<5> transform-style:preserve-3d;　　當一個組合體（內部有3D），自己要進行旋轉，那麼一定要加上這個屬性，加上之後內部的小元素的3D變化將保留

　　　　　　　　

　　　　　　eg！：

　　　　　　　　　　背面不可見

1 backface-visibility:hidden;

 

　　　　　　　　　　像兩張撲克牌背靠背貼在一起，baby從-180 → 0  ，  xiaoming從0 → 180

1 <div> 2  <img class="baby" src="images/baby.png" /> 3  <img class="xiaoming" src="images/xiaoming.png" /> 4 </div>

 

　　　　2.trasotion   過渡      值得注意的是   過渡需要準備時間！！

 　　　　　　　　transition:all 1s ease 0s;   很簡單  效率高   很好用 

 　　　　3.animation 

　　　　　使用動畫必須先@-webkit-keyframes 定義動畫  指的是主要畫面格  只需要定義初始樣和結果樣 

　　　　　在一個元素內調用  animation    

　　　　　　　　　　animation: GOGO 10s linear 0s 10 alternate forwards;       

　　 // 參數GoGo 動畫的名字，自訂  ，10s 動畫的總共長度，linear動畫的緩衝效果  ，os延遲時間，如果進行多次 僅第一次延時，10代表運動次數 infinite代表無限次  alternate代表是否來回運動，如果寫了就是要來回運動  ， forwards 代表運動後是否留在原地  ，寫了代表留在原地

　　　　動畫的定義1 ：  意思是動畫進行到多大程度產生變化

　　　　　@-webkit-keyframes GOGO{   

　　　　　　0%{

　　　　　　　　　　// 這裡寫變化的量 

　　　　　　}

　　　　　　50%{

　　　　　　}

　　　　　　100%{

　　　　　　}

　　　　}

　　　　動畫定義2 ：form to 從什麼變成什麼

　　　　　　@-webkit-keyframe GOGO{

　　　　　　　　form{

　　　　　　　　}

　　　　　　　　to{

　　　　　　　　}

　　　　　　}

 

css3 三大王 transition , transform , animation