3D转换

空间位移

• 语法

transform: translateZ(300px);      transform:translate3d(100px,100px,100px);

tl前面加入3d之后就可以连写三个轴

• 使用手册

  • 网页默认显示是2d的，单独使用tlZ看不到3d效果的

  • Vscode快速生成tf tl

透视效果

• 语法

  perspective: 500px;

• 使用手册

  • 给谁加：设置给使用了3d元素的父元素（亲爸爸）

  • 有什么用：类似给电脑屏幕加了一双眼睛

  • 取值范围：400~1200px

  • Vscode快速生成：pp

   

空间旋转

• 语法

  transform: rotate(360deg);
          =
  transform: rotateZ(360deg);

  两种语法实现效果一致

• 使用手册

  • 左手法则

    拇指指向各个正轴的方向，其余手指的弯曲方向即为正方向

  •  

动画

步骤

• 定义动画

• 调用动画

  • 第一个参数是你定义的动画名称

  • 第二个参数是动画时长

语法

基础语法

@keyframes name{
    0%{}                from{}
            两种表示方式  
    100%{}              to{}
}

animation: name time

区别：百分比可以分阶段点

连写语法

animation: name duration timing-function delay iteration-count direction fill-mode;

• 属性参照

• 使用手册

  • forwards不能和infinite结合使用，否则不生效

  • animation 里面属性值 不分先后顺序

  • 简写属性里面不包含 animation-paly-state

  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

  • 要想动画走回来，而不是直接调回来：animation-direction: alternate

  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

  • 速度曲线：默认 ease；

    • linear 匀速播放

    • steps(次数)一般配合精灵图使用（2选1）

• 详细使用

  animation: move 2s linear 1s infinite alternate forwards;

使用事项

• 动画名称不可重复

  否则写在上面的会被覆盖

• 可参与动画属性是学过的大部分css属性

  可参与过渡的便可参与动画

• 不可使用的定义动画名：running

• 初始情况如果和原本没有差别的话，可以省略不写

动画类型

补间动画

特点

• 平滑切换

• 默认速度曲线值：ease

逐帧动画

特点

• 一帧一帧切换

• 使用速度曲线属性：steps（正整数）