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;