No.2.2

空间转换（使用transform属性实现元素在空间的位移、旋转、缩放等效果）

空间：是从坐标轴角度定义的。x、y、和 z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

空间转换也叫3D转换（属性：transform）

使用translate实现元素空间位移效果

语法：transform: translate3d(x,y,z);

transform: translateX(值);　　transform: translateY(值);　　transform: translateZ(值);

取值（正负即可）像素单位取值　　百分比

透视：（使用perspective属性实现透视效果）

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？近大远小，近清楚远模糊

思考：默认情况下，为什么无法观察到Z轴位移效果？Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

属性（添加给父级）perspective: 值;

取值：像素单位数值，数值一般在800-1200

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

空间旋转（使用rotate实现元素空间旋转效果）

语法：transform: rotateZ(值);　　transform: rotateX(值);　　transform: rotateY(值);

 左手法则：判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

拓展：rotate3d(x,y,z,角度度数); 用来设置自定义旋转轴的位置及旋转的角度（x，y，z取值为0-1之间的数字）（基本不用）

立体呈现（使用transform-style: preserve-3d）呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？不能，perspective只增加近大远小、近实远虚的视觉效果

实现方法：添加transform-style: preserve-3d;　　使子元素处于真正的3d空间　　默认值flat，表示子元素处于2D平面内呈现

呈现立体图形步骤

搭建立方体：li标签（添加立体呈现属性transform-style: preserve-3d; 添加旋转属性（为了便于观察效果，案例完成后删除即可））

　　　　　　a标签（调节位置  a标签定位（子绝父相） 英文部分添加旋转和位移样式  中文部分添加位移样式）

空间缩放（使用scale实现空间缩放效果）

语法：transform: scaleX(倍数); 　　transform: scaleY(倍数); 　　transform: scaleZ(倍数); 　　transform: scale3d(x,y,z); 

动画：（使用animation添加动画效果）

思考：过渡可以实现什么效果？实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

实现步骤：　　1.定义动画： @keyframs 动画名称 {　　　　@keyframes 动画名称 {

　　　　　　　　　　　　　　　　from {}　　　　　　　　　　0% {}

　　　　　　　　　　　　　　　　to{}　　　　　　　　　　　  10% {}

　　　　　　　　　　　　　　}　　　　　　　　　　　　　　　15% {}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 100% {}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　2.使用动画：　　animation: 动画名称 动画花费时长;

动画属性：（使用animation相关属性控制动画执行过程）

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

　　　　属性　　　　　　　　　　　　作用　　　　　　　　取值

　　animation-name 　　　　　　　　动画名称　　　　

　　animation-duration　　　　　　　动画时长

　　animation-delay　　　　　　　　延迟时间

　　animation-fill-mode 　　　　　　动画执行完毕时状态　　forwards: 最后一帧状态　　backwards：第一帧状态

　　animation-timing-function　　　　速度曲线　　　　　　  steps(数字)：逐帧动画

　　animation-iteration-count　　　　重复次数　　　　　　   infinite为无限循环

　　animation-direction　　　　　　  动画执行方向　　　　　alternate为反向

　　animation-play-state　　　　　　暂停动画　　　　　　　pauused为暂停，通常配合:hover使用

注意：动画名称和动画时长必须赋值 　　取值不分先后顺序　　如果有两个值，第一时间表示动画时长，第二个时间表示延迟时间

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果（animation-timing-function: steps(N); ）

将动画过程等分成N份

精灵动画制作步骤：1.准备显示区域（设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图）　　

　　　　　　　　　2.定义动画（改变精灵图的位置（移动的距离就是精灵图的宽度））　　

　　　　　　　　　3.使用动画（添加速度曲线steps(N),N与精灵图上小图个数相同，添加无限重复效果）

多组动画：animation: 

　　　　　　动画1,

　　　　　　动画2，

　　　　　　动画N

　　　　　;

      /* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 */

走马灯：使用animation实现逐帧图片位移效果

<!-- 第567移动的时候，显示区域不能留白 -->

 /* 定义动画：位移 ul左侧使用 x -1400px  */

  /* 缩放背景图 */

  /* 图片等比例缩放，当宽度或高度和盒子尺寸相等，图片就不缩放 */

  /* background-size: contain;  */

  /* 图片会等比例缩放，图片完全覆盖到整个盒子，可能导致图片显示不全 */

  background-size: cover;

制作背景大图的时候注意两点：1.html和body的高度都取100%　　2.背景图尺寸不合适 background-size: cover;