一.CSS3變形transform
	
	1.平移：translate(x,y)	translateX(x)	translateY(y)		
		
		註意：如果想只向X軸平移那麽可以translateX，如果想只向X軸平移那麽可以translateY，X和Y不能共存。如果想向兩個方向平移，那麽使用translate
		
					   y軸
						^	-
						|
						|
						|	
						|
						|
						|
	-	--------------------------------->	+	x軸
						|
						|	
						|
						|
						|
						|	+
	
	2.縮放：	scale(x放大倍數，y放大倍數)		scaleX(x放大倍數)	scaleY(Y放大倍數)
		
		註意：如果想放大那麽寫大於1的數，如果想縮小，那麽寫小於1的數
		
	3.傾斜：	skew(x軸傾斜角度，y軸傾斜角度)	skewX(x軸傾斜角度)	skewY(y軸傾斜角度)
	
		註意：x軸為正值按照逆時針x軸為負值按照順時針，y軸正值為順時針傾斜，y軸負值為逆時針傾斜
	
	4.旋轉：	rotate(旋轉角度)	正值為順時針旋轉，負值為逆時針旋轉
	
二.CSS3過渡
	
	transition:需要過度的屬性 過度時間(s) 過度動畫函數 延遲時間(s)
	
		過渡動畫函數：
			ease：速度由快到慢（默認值）
			linear：速度恒速（勻速運動）
			ease-in：速度越來越快（漸顯效果）
			ease-out：速度越來越慢（漸隱效果）
			ease-in-out：速度先加速再減速（漸顯漸隱效果）
			
	img:hover{
            transform: rotate(90deg) scale(1.2);
            transition: all 1s linear 1s;
    }
	
	過渡處罰機制：
		偽類觸發
			：hover
			：active
			：focus
			：checked

		媒體查詢：通過@media屬性判斷設備的尺寸，方向等
		JavaScript觸發：用JavaScript腳本觸發
		
三.CSS3動畫

	1.設置關鍵幀
		@keyframes 關鍵幀名稱{
            0%{
                width: 0;
                transform: scale(1.5);
            }
            33%{
                width: 60px;
                transform: translate(200px,0px) scale(2);
            }
            66%{
                width: 120px;
                transform: translate(300px,0px);
            }
            100%{
                width: 200px;
                transform: translate(400px,0px);
            }
        }
	2.調用關鍵幀
		animation: 關鍵幀名稱 執行時間 播放方式 延遲時間 播放次數;

第九章 利用CSS3制作網頁動畫