移动WebTransform进阶学习动画转换旋转3D

Transform进阶学习

• 空间转换

语法Transform:translate3d:(x,y,z);— Transform:translate;

Z轴的效果表现需要借助perspective属性（取值一般在800-1200）【加到父元素】

• 视距属性
  Perspective属性值越小，那么Z轴所表示的3D效果就越明显（也就是眼睛距离电脑中的效果就越近）

---

• 空间旋转

  Transform:rotateX/Y/Z 或 rotate3d(x,y,z,deg) 【x,y,z取值为1】用得少
  取值1代表自动计算

• 空间3D效果呈现
  语法： Transform-style:preserve-3d 让元素下的子元素添加3D效果
  注意：rotate旋转 单位deg / translate 单位px

• 空间缩放

• 语法：Transform:scale

---

动画-animation

格式：

@keyframes 名称{
	From{}
	To{}
	或
	0-100%{
	}	
}
/*注意: from和0%的值可省 */

属性	作用	取值
Animation-name	动画名称
Animation-duration	动画时长
Animation-delay	延迟时间
Animation-fill-mode	动画执行完毕时状态	Forwards:最后一帧状态
Animation-timing-funcition	速度曲线	Steps（数字）：逐帧动画
Animation-iteration-count	重复次数	Infinite为无限循环
Animation-direction	动画执行方向	Alternate为反向
Animation-play-state	暂停动画	Paused为暂停，通常配合:hover使用