自学前端Day2

空间转换

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

空间平移：
  transform: translate3d(x, y, z);
  transform: translateX(值);
  transform: translateY(值);
  transform: translateZ(值);
  
空间旋转：
  transform: rotateZ(值);
  transform: rotateX(值);
  transform: rotateY(值)；
  
空间缩放：
  transform: scaleX(倍数);
  transform: scaleY(倍数);
  transform: scaleZ(倍数);
  transform: scale3d(x, y, z)；
  
立体呈现步骤：
  
  1. 盒子父元素添加transform-style: preserve-3d；
  2. 按需求设置子盒子的位置（位移或旋转）

动画

食用方法：

1、定义动画

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


  @keyframes {
    0% {}
    50% {}
    100% {}
   }

2、使用动画（谁要食用就给谁添加）

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数(infinite)  执行完毕时的状态；

常用动画属性：

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

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

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

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