Day14-CSS3

3D：

3D：立体空间
	x轴：水平方向
	y轴：垂直方向
	z轴：垂直于x，y轴
1.开启3D空间：
	transform-style:;
		float 	默认值，开启2d空间
		preserve-3d 开启3d空间
		给父元素开启3d空间
2.3d中变形属性的设置：
	位移：
		transform:translate();
			translateZ()
			translate3d(x,y,z)
			z轴的值不能使用 % ;
	缩放：
		transform:scaleZ;
			scaleZ()
			scale3d(x,y,z)
			缩放是倍数关系
	旋转：
		tranform:rotate();
			rotateZ();等同于rotate()
			rotate3d(x,y,z,a)
				x,y,z的取值范围是0-1
					0表示不旋转
					1表示旋转
				a 表示旋转角度
3.景深：
	1.设置离屏幕的距离，近大远小，值越大效果越不明显
		perspective:value;
			建议取值范围800-1200之间
			添加给父元素
	2.观察元素的角度位置属性：
		perspective-origin:;
		属性值：
			数值加单位：px/%
			法定属性值：left,right,top,bottom,center
		说明：
			1.原点设置，基点位置，观察元素的位置角度
			2.要配合景深一起使用
	3.3d变形原点属性：
		transform-origin:x,y,z;
			属性值：
				数值加单位：px / %
				法定属性值：left,right,top,bottom,center
				默认值：50%，50%，0；

动画：

1.animation和transition的区别：
	相同点：都可以实现动画效果，可以让一个值，在一定的时间区间内，发生变化
	不同点：
		transition只能实现从初始效果到结束效果之间的变化，必须触发某个事件才能实现过渡效果
		animation：不需要触发任何事件，可以实现比较复杂的动画效果，

2.动画的关键帧：设置动画轨迹
	语法：
		@keyframes animationName {
			from {初始状态属性}
			to {结束状态属性}
		}
			@keyframes 关键帧
			animationName 动画名称，自定义的，语义化命名
			from 初始状态，相当于0%的状态
			to 结束状态，相当于100%的状态
		兼容性：
			@-webkit-keyframes name{}
			@-moz-keyframes name{}
			@-o-keyframes name{}
			@-ms-keyframes name{}
			@keyframes name{}
3.动画属性:animation
	1.设置动画名称:必选
		animation-name:;
			属性值就是关键帧的动画名称；
	2.设置动画的持续时间：必选
		animation-duration:;
			属性值：s / ms
	3.设置动画类型属性：
		animation-timing-function:;
			属性值：
				与transition-timing-function相同
				steps(n,start/end); 
	4.设置延迟时间：
		animation-delay:;
			属性值：s / ms
				支持负值，提前执行
	5.规定动画效果在播放之前或之后，是否可见
		animation-fill-mode:;
			属性值：
				none  0%在延迟后生效，结束后回到默认位置
				backwards 0%在延迟前生效
				forwards 在100%状态下结束
				both 在0%开始，在100%结束
	6.动画的循环次数
		animation-iteration-count:;
			属性值：
				infinite 无限循环
				number	循环的次数
	7.动画的方向
		animation-direction:;
			属性值：
				normal	正常方向
				reverse	反方向运动
				alternate 正常方向再反方向，持续交替运行
				alternate-reverse 先反方向再正常方向，持续交替进行
	8.设置动画的状态，运动、暂停
		animation-play-state:;
			属性值：
				running 运动
				paused 暂停
			当触发事件的时候使用
4.动画的复合属性：animation
	animation: name duration delay;
	属性值之间用空格隔开，必须要有的是动画名称和持续时间

动画库的使用：

第一种方法：直接通过class名调用
	基本名字:animate__animated;
	动画名称：animate__tada;
第二种方法：通过css自定义属性
	animation-name:tada;