3D写法

景深: 近大远小的效果 perspective:; 给父元素添加,作用到子元素身上 900p-1200px

3D环境: transform-style:;给父元素添加,给子元素提供3d环境
			falt 默认值,2D环境
			preserve-3d 3D环境
			
观测角度：perspective-origin:水平  垂直；
	left center right
	top center bottom
	px %
			
3D功能函数:
	位移:
		translateZ()
		translate3D(x,y,z)
		
	旋转:
		rotateX()
		rotateY()
		rotateZ()
		rotate3D(x,y,z,deg)
			x,y,z  取值0 为否  
				   取值1 为是
			deg 旋转的角度
			
	缩放:
		scaleZ()
		scale3D(x,y,z)
		【注】单独使用效果不明显,需要配合其他功能函数一块使用
		
动画:
	1: 定义关键帧
	2: 调用关键帧
	
	定义关键帧:
		方法一:
			@keyframes move1{
				from{} 起始位
				to{} 结束位
			}
			
		方法二:
			@keyframes move2{
				0%{}
				50%{}
				100%{}
			}
			
	
	调用动画:
		animation:动画名称 动画时间 延迟时间 运动类型 运动次数 运动方向 是否运动;
			animation-name:动画名称;
			animation-duration: 运动时间;
			animation-delay:0s;/*延迟时间;
			animation-timing-function:动画类型;
				linear
				ease
				ease-in
				ease-out
				ease-in-out
				step-start 逐帧动画
				
			animation-iteration-count:运动次数;
				infinite 无限循环
				number 具体次数
									
			animation-direction:运动方向;
				normal 默认值
				reverse 反向运动
				alternate 先正后反
				alternate-reverse 先反后正
				
			animation-play-state:是否运动;
				running 运动
				paused 暂停
		
		
		animation 和 transition对比:
			相同点: 都是随着时间的变化而变化
			不同点: animation不需要触发方式,页面加载完成立即执行
					transition需要触发方式