3D

景深

景深: 近大远小的效果
        perspective:; 给父元素设置,作用到子元素身上
	
3D环境:
	transform-style:;
		flat 2D环境
		preserve-3D 3D环境
		
3D功能函数:
	位移:
                translateZ()
                translate3D(x,y,z)
		
	旋转:
		rotateZ()
		rotate3D(x,y,z,deg)
			x y z 取值为0-1  0为否 1为是
			deg是角度
			
	缩放:
		scaleZ()
		scale3D(x,y,z)
		
动画:
	定义动画
		方式一:
			@keyframes nam{
				from{}
				to{}
			}
			
		方式二:
			@keyframes name{
				0%{}
				50%{}
				100%{}
			}
	
	调用动画
		animation:动画名字 运动时间 延迟时间 动画类型 运动次数 运动方向;
			animation-name:动画名称;
			animation-duration: 运动时间;
			animation-timing-function:动画类型;
				lienar
				ease
				ease-in
				ease-out
				ease-in-out
				step-start 逐帧动画
			animation-iteration-count: 运动次数;
				具体数字
				infinite 无限循环
			animation-direction: 运动方向;
				normal 常规运动
				reverse 反向运动
				alternate 先正后反
				alternate-reverse 先反后正
			animation-play-state:是否运动;
				runnning 运动
				paused 暂停
		
	关于animation 和 transition 的区别:
		相同点: 都是随着事件的变化而改变元素的属性值
		不通电: 
			前者页面加载完立即执行;后者需要触发方式
			前者可以有多个状态;后者还有一个状态