空间转换

1.空间转换

目标：使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果

• 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了

• 个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换

• 属性：transform

2.空间位移

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

代码：

• transfrom：translate3D（X,Y,Z);
• transfrom：translatex（值）
• transfrom：translatey（值）
• transfrom：translatez（值）

取值：（正负均可）

• 像素单位
• 百分比

透视

目标：使用perspective属性实现透视效果（给父级元素添加）

代码：perspective（）给像素单位 一般设置为1000px

释义：所谓的视距就是人的眼睛到屏幕的距离

效果：近大远小

3.空间旋转

目标：使用rotate实现元素空间旋转的效果

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

拓展：rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

x，y，z 取值为0-1之间的数字

立体呈现

目标：使用transfrom-style：preserve-3d呈现立体图形

作用：使子元素处于真正的3d空间

动画

目标：使用animation添加动画效果

• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧

实现动画的步骤：

1. 先定义动画

   @keyframes 动画名称（英文） {
       from {
           “开始”
       }
       to {
           “结束”
       }
   }
   
   @keyframes 动画名称（英文） {
       0% {}
       10% {}
       30% {}
       100%{}
   }
   
   
   

   2.使用动画（使定义的动画效果动起来）

   animation: name （动画名称）
   duration         （动画时长）
   timing-function （速度曲线）
   delay             （延迟时间）
   iteration-count （重复次数）-infinite无限循环
   direction        （动画执行方向）-alternate反向
   fill-mode;        （动画完毕时的状态）-forwards：最后一帧状态：backwards第一帧状态）
         }
   animation-play-state：暂停动画   paused暂停
   running运行   通常配合hover使用
   

• 动画播放次数：infinite 无限次播放

• 动画播放方向：alternate 交替播放

• 速度曲线：默认 ease； linear 匀速播放

• ​ 执行完毕时的状态：forwards 动画会停在动画结束时的状态；

​ 注意点：

• ​ 动画名称和播放一次动画的时长必须写，其他属性需要就写
• ​ forwards不能和infinite结合使用，否则不生效
• ​ animation 里面属性值 不分先后顺序
• ​ 当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
• 使用steps（）实现逐帧动画（一般配和精灵图使用）

精灵动画制作步骤

1.准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

2.定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

3.使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同

添加无限重复效果