css动画形变、运动、3d详解

蔚落 2021-07-24 21:13 509阅读 0赞

要产生动画过渡效果,必须要有属性的变化,初始设置不能产生动画
    
    transform变化:
    	以' '空格分隔,可以一次写多个变化
    	同个元素多个transform,其他transform不会保留之前的效果,需要重写
    	
    	移动:
    	translateX(npx);
    	translateY(npx);
    	translateZ(npx); 往纵穿元素的方向运动,看起来像大小变化的水平移动
    	translate(npx,npx)
    	translate3d(npx,npx,npx)
    	
    	旋转:
    	非平面需要透视
    	rotateX(1turn);  1turn即1圈为360deg,90deg=0.25turn
    	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过渡:
    	监听过渡结束事件:addEventListener('webkitTransitionEnd',fn);
    	设置变化的时间等,当配合伪类要产生时间的话,伪类中的属性本类中至少要有一项,否则无法产生时间延迟
    	在伪类中设置只会触发激活的一段,返回的时间不会触发
    	伪类的过渡会基础本类设置的过渡
    	
    	设置所有属性过渡以及简写
    	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;