文章目录

• 一、空间转换
• • 1、空间位移
  • 2、透视
  • 3、空间旋转
  • 4、立体呈现
  • 5、空间缩放
• 二、动画
• • 1、实现步骤
  • 2、动画属性
  • 3、多组动画

一、空间转换

• 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
• 空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
• 空间转换也叫3D转换

1、空间位移

语法

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);

取值（正负均可）

• 像素单位数值
• 百分比

2、透视

属性（添加给父级）

• perspective:值;
• 取值：像素单位数值，数值一般在800–1200。
• 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用

• 空间转换时，为元素添加近大远小、近实远虚的视觉效果

3、空间旋转

语法

• transform:rotateZ(值);
• transform:rotateX(值);
• transform:rotateY(值);

左手法则

• 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展

• rotate3d(x, y, z, 角度度数)
• 用来设置自定义旋转轴的位置及旋转的角度
• x，y，z取值为0-1之间的数字

4、立体呈现

• 盒子父元素添加transform-style: preserve-3d;
• 按需求设置子盒子的位置（位移或旋转）

5、空间缩放

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);

二、动画

• 使用animation添加动画效果
• 实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
• 构成动画的最小单元：帧或动画帧

1、实现步骤

定义动画

  @keyframes 动画名称 {
    from{}
    to{}
  }

或

  @keyframes 动画名称 {
    0%{}
    15%{}
    80%{}
    100%{}
  }

使用动画

 animation: 动画名称 动画花费时长;

2、动画属性

• animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数动画方向 执行完毕时状态;
• 动画名称与 动画时长必须赋值
• 取值不分先后顺序
• 如果有两个时间值，第一个表示动画时长，第二个表示延迟时间

3、多组动画

animation: 
   change 1s steps(12) infinite,
   move 3s forwards linear;