H5学习---html，css---3D 动画

3D

- perspective元素距离视线的距离(1000-3000px)
	模拟近大远小效果,添加给父元素
- perspective-origin观察子元素的视角(默认值为中心点)
- transform-style:preserve-3d;子元素保留3d转换位置
- backface-visibility: hidden;子元素背面不可见,添加给子元素
- 位移
	transform: translateZ(300px);沿着z轴移动
	transform: translate3d(100px,200px,300px);xyz轴共同作用
- 旋转
	transform:rotateX(45deg);
	transform:rotateY(45deg);
	transform:rotateZ(45deg);就是2d的顺逆时针
	transform:rotate3d(x,y,z,45deg);
- 缩放
	transform:scaleZ();

动画

- 定义动画
	@keyframes 动画名称{
		/*定义关键帧*/
		0%{
			background:red;
		}
		50%{
			background:yellow;
		}
		100%{
			background:green;
		}
	}
- 执行动画
	animation:动画名称  持续时间  过渡类型  延迟时间  次数  是否反向;
		过渡类型：匀速linear
		次数：无限次infinite
		是否反向：反向运动alternate
	animation-play-state:paused;动画暂停
- 前缀
	-webkit- 谷歌和Safari
	-ms- IE的
	-o- Opera
	-moz- 火狐