CSS3 动画+3D转换

CSS3 动画---是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用：
1.先定义动画
	keyframes定义动画(类似定义选择器)
		@keyframes 动画名称 {
		    0% {
		        width: 100px;
		    }
		    100% {
		        width: 200px
		    }
		}
(动画序列)
	-0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
	-在 @ keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
	-动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
	-用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100% 

2.再使用（调用）动画}
	div {
	      width: 100px;
	      height: 100px;
	      background-color: pink;
	      /*调用动画*/
	      animation-name: 动画名称;
	      /*持续时间*/
	      animation-duration: 0.5s;
	    }

动画常见属性：

**简写方式:**
/* animation: **动画名称 持续时间**（必写） 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
注意：
	-简写属性里面不包含 animation-paly-state
	-暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
	-要想动画走回来，而不是直接调回来 animation-direction: alternate
	-盒子动画结束后，停在结束位置 animation-fill-mode:forwards

速度曲线细节：
animation-timing-function: 规定动画的速度曲线，默认是ease

3D转换---近大远小，物体和面遮挡不可见

三维坐标系：
	x 轴：水平向右  注意：x 轴右边是正值，左边是负值
	y 轴：垂直向下  注意：y 轴下面是正值，上面是负值
	z 轴：垂直屏幕  注意：往外边的是正值，往里面的是负值

主要知识要点：
3D 位移：translate3d(x, y, z)---在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向
	transform: translateX(100px)：仅仅是在 x 轴上移动
	transform: translateY(100px)：仅仅是在 y 轴上移动
	transform: translateZ(100px)：仅仅是在 z 轴上移动
	简写： transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意： x、 y、 z对应的值不能省略，没有写0 

透视 perspctive:}
body {
	  /*透视需要写在被视察元素的**父盒子**上面 */
	  perspective: 500px;
	}
	-如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
	-实际上模仿人类的视觉位置，可视为安排一只眼睛去看
	-透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离
	-距离视觉点越近的在电脑平面成像越大，越远成像越小
	-透视的单位是像素

3D 旋转 rotate3d:---指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转
	transform: rotateX(45deg) -- 沿着 x 轴正方向旋转 45 度
	transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
	transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
	transform: rotate3d(x, y, z, 45deg) -- 沿着自定义轴旋转 45 deg 为角度(了解）

左手法则：
	-左手的手拇指指向 x | y |z轴的正方向
	-其余手指的弯曲方向就是该元素沿着 x | y |z 轴旋转的方向

**3D呈现 transfrom-style:**---控制子元素是否开启三维立体环境
	-transform-style: flat --子元素不开启 3D 立体空间(默认)
	-transform-style: preserve-3d--子元素开启立体空间
	-代码写给**父级**，但是影响的是子盒子
	-这个属性很重要

浏览器私有前缀：
-moz:代表Firefox浏览器
-ms:ie浏览器
-webkit:safari、chrome私有属性
-o-:Opera私有属性