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

要产生动画过渡效果,必须要有属性的变化,初始设置不能产生动画

transform变化:
	以' '空格分隔,可以一次写多个变化
	同个元素多个transform,其他transform不会保留之前的效果,需要重写
	
	移动:(当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕)
	translateX(npx);
	translateY(npx);
	translateZ(npx); 往纵穿元素的方向运动,看起来像大小变化的水平移动,当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕
	translate(npx,npx)
	translate3d(npx,npx,npx)
	
	旋转:(当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕)
	非平面需要透视
	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对角线旋转,向量越大,对应轴的旋转力度越大
	
	
	缩放:(当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕)
	scaleX(n); 宽度缩放
	scaleY(n); 高度缩放
	scaleZ(n);  z轴被拉伸/压缩缩放,不是改变元素高宽
	scale(n)/scale(n宽,n高)  高宽都缩放
	scale3d(n,n,n)
	
	倾斜:对于倾斜来说,x轴向下,y轴向右,x方向正角度,逆时针变化,y方向正角度,顺时针变化(当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕)
	skewX(ndeg); 水平方向倾斜,高度不变
	skewY(ndeg); 竖直方向倾斜,宽度不变
	skew(ndeg,ndeg)
	
	2d改变形变起点:
	transform-origin:n n;	当值为translate时,移动的距离是绝对值,与transform-origin无关
	当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕
	
	3d:
	只要涉及到z轴的3d效果或投影,就需要3d,放置父元素,用于查看子元素的旋转等3d,即子元素就可以相对于父元素所在的平面,进行3D变形操作
	transform-style: preserve-3d; 	子元素将保留其3D位置。只针对一层子元素,嵌套的子子元素需要再添加transform-style: preserve-3d;而perspective(npx)对整个容器有效,即后续不需要添加
		flat:子元素将不保留其3D位置。
	
	透视(3D元素距视图的距离):
	只要涉及到z轴的3d效果或投影,就需要透视透过投影
	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;可改变参考点,也可换成数值
	当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕
	
3d改变形变参考点:
	改变了纵穿物体的z轴,默认为在元素平面中心点
	transform-origin: left center npx;可改变参考点,也可换成数值
	当进行旋转等操作后,xyz轴都变成旋转后的平面,而非屏幕
	
3d改变透视和基点:
	父元素必须设置透视和3d
	perspective:npx
	perspective-origin: bottom center; 	表示3D元素透视视角的基点位置,默认的透视视角中心在容器是perspective所在的元素,而不是他的后代元素的中点,默认为50% 50%,定义3D元素所基于的 X 轴和 Y 轴

元素背面不可见:
	backface-visibility: hidden|visiable;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值