css動畫 形變、運動、3d詳解

transform變化:
	以' '空格分隔,可以一次寫多個變化
	同個元素多個transform,其他transform不會保留之前的效果,需要重寫
	
	移動:
	translateX(npx);
	translateY(npx);
	translateZ(npx); 往縱穿元素的方向運動,看起來像大小變化的水平移動
	translate(npx,npx)
	translate3d(npx,npx,npx)
	
	旋轉:
	非平面需要透視
	rotateX(ndeg):元素水平中線爲軸,從下往上開始旋轉,然後投影在屏幕,只看得到面積變化,無角度
	rotateY(ndeg):元素豎直中線爲軸,從右往左逆時針開始旋轉,然後投影在屏幕
	routateZ(ndeg); 沿着z軸,即按照平面旋轉
	routate(ndeg); 和繞z軸旋轉相同,在平面旋轉
	routate3d(n向量,n向量,n向量,ndeg);
		當n爲0時代表不繞該軸旋轉,1,1,0表示按xy對角線旋轉,向量越大,對應軸的旋轉力度越大
	
	
	縮放：
	scaleX(n); 寬度縮放
	scaleY(n); 高度縮放
	scaleZ(n);  z軸被拉伸/壓縮縮放,不是改變元素高寬
	scale(n)/scale(n寬,n高)  高寬都縮放
	scale3d(n,n,n)
	
	傾斜:
	skewX(ndeg); 水平方向傾斜,高度不變
	skewY(ndeg); 豎直方向傾斜,寬度不變
	skew(ndeg,ndeg)
		
	3d:
	只要涉及到z軸的3d效果或投影,就需要3d,放置父元素,用於查看子元素的旋轉等3d
	transform-style: preserve-3d;
	
	透視:
	只要涉及到z軸的3d效果或投影,就需要透視透過投影
	perspective(npx):透視,即透視元素的投影,看到元素旋轉的原本模樣,越大透視越小
		每個元素單獨加透視,則透視的角度是一樣的:transform:perspective(npx);
		perspective:npx; 隻影響子元素,每個子元素的透視都不相同,做整體效果可能會不對整
		transform:perspective(npx); 只對自身,每個子元素的透視點都相同
	
transition過渡:
	設置變化的時間等,當配合僞類要產生時間的話,僞類中的屬性本類中至少要有一項,否則無法產生時間延遲
	在僞類中設置只會觸發激活的一段,返回的時間不會觸發
	僞類的過渡會基礎本類設置的過渡
	
	設置所有屬性過渡以及簡寫
	transition:ns; 
	transition:transform ns;
	transition:all 運動方式 過渡時間 延遲過渡時間
	transition:屬性 運動方式 過渡時間 延遲過渡時間,屬性 運動方式 過渡時間 延遲過渡時間,...
	
	設置過渡時間:
	transition-duration: ns;
	transition-duration:ns,ns; 對應transition-property的屬性,分別設置過渡時間，未匹配的屬性會從第一個時間開始重新匹配
	
	設置指定屬性過渡
	transition-property:屬性1,屬性2/all全過渡/none都不過渡
	transition-duration: ns;  搭配transition-property使用,直接transition無效
	
	設置延遲過渡(延遲多少秒後執行transition-duration)
	transition-delay:ns,nms,...; 配合transition-property可實現指定屬性延遲過渡，過渡規則和transition-duration一樣
	
	設置過渡方式
	transition-timing-function: ease-in;
	transition-timing-function:cubic-bezier(.17,.67,1,-0.21); 根據貝塞爾來繪製,可在cubic-bezier.com中測試
	transition-timing-function:steps(n,start/end);  將動畫分爲n步(幀)完成,start立即開始,end會過1幀再開始,效果類似ppt
		其中:transition-timing-function:steps(1,start/end);可簡寫成step-start/step-end
	
	監聽過渡(動畫)結束
	xx.addEventListener('transitioned',function(e){...})		

2d改變行變參考點:
	旋轉等默認爲元素中心
	對所有的2d變化都有效
	transform-origin: left center;可改變參考點,也可換成數值

3d改變形變參考點:
	改變了縱穿物體的z軸,默認爲在元素平面中心點
	transform-origin: left center npx;可改變參考點,也可換成數值

改變視角讓物體旋轉:
	父元素必須設置透視和3d
	perspective:npx
	perspective-origin: bottom center; 或者數字,視角到物體的下部中心

元素背面不可見:
	backface-visibility: hidden;