移动端

效果

一 .transform合写

变化	形式
transform	平移ranslate(X,Y)缩放scale(1.5)旋转 rotate(360deg)斜切skewX(30deg) X轴不变Y轴变倾斜角度
transition	all 1s
perspective （给父元素加）	透视 视距 指定观察者与z=0平面的距离 近大远小(越大越不明显500-1000px即可)

细节

①transform：只能写一个，写了多个会发生覆盖，需要多个效果需要写一个里面如果合写多个效果，注意收到顺序影响，保证生效需要一 一对应(写齐) rotate旋转的时候会影响坐标轴放最后面

• translate平移不会影响别的元素，平移的单位px或%(相对盒子自身的宽高)，盒子水平垂直居中（不用margin），先position移动然后用transform移动
• scale 盒子放大内容放大 放大图片 div>图片 div加overflow :hidden 图片放大盒子不变
• transform-orign(旋转点）: center水平 center垂直；（默认)
• skewX(30deg)扫光效果

②transition：谁过渡给谁加 过渡transition可以放到A状态 div：hover B状态如果过渡放到A状态可以看到两次效果放到B状态可以看到一次效果
perspective不能给具体旋转的子盒子添加，可以给他的父盒子或祖先盒子添加
③perspective不能给具体旋转的子盒子添加，可以给他的父盒子或祖先盒子添加

transform-style ：preserve-3d；(并非直接body，找邻近的父盒子）子盒子处于3d空间 谁是3d元素给谁加，这样子元素才会在3d空间内例如：做立方体给box加，3d导航栏给li加

注意

• 在做立方体翻面效果时，先做translate调整位置，再做rotate旋转
  原因：直接翻转，翻转的那面会翻到正中心

<div class="box">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>

.box {
      /* perspective: 1000px; */
      width: 200px;
      height: 200px;
      /* border: 1px solid #000; */
      margin: 200px auto;
      position: relative;
      transition: 5s;
      transform-style: preserve-3d;
    }
    .box:hover {
      transform: rotateX(360deg) rotateY(360deg);
    }
    .inner {
      width: 100%;
      height: 100%;
      position: absolute;
      /* transition: all 1s; */
      
    }
    .inner:nth-child(1) {
      background-color: pink;
      transform: translateZ(-100px);
    }
    .inner:nth-child(2) {
      background-color: red;
      transform: translateZ(100px);
    }
    .inner:nth-child(3) {
      background-color: teal;
      transform: translateX(100px) rotateY(90deg);
    }
    .inner:nth-child(4) {
      background-color: gold;
      transform: translateX(-100px) rotateY(90deg);
    }
    .inner:nth-child(5) {
      background-color: lime;
      transform: translateY(100px) rotateX(90deg);
    }
    .inner:nth-child(6) {
      background-color: blue;
      transform: translateY(-100px) rotateX(90deg);
    }

• 扫光
  定位运用（前后都要写，因为过渡transition可以放到A状态 div：hover B状态如果过渡放到A状态可以看到两次效果放到B状态可以看到一次效果）

<div class="box">
    <img src="images/pro.jpg" alt="">
  </div>

body {
      background-color: #000;
    }
    .box {
      width: 340px;
      height: 420px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    .box::after{
      content: '';
      position: absolute;
      width: 20px;
      height: 420px;
      transform: skewX(-30deg);
      /* background-color: lime; */
      background: rgba(255, 255, 255, .8);
      left: -200px;
    }
    .box:hover::after {
      transition: 2s;
      left: 500px;
    }

二.动画合写

♥ animation详解(了解型知识点)

duration要写在前面

animation是一个复合属性，一共有8个参数

animation：
name / duration / delay /
-timing-fuction动画效果(ease变化快到慢/linear匀速/steps步速) /
-iteration-count指定动画次数infinite无穷 /
-direaction动画方向（normal/reverse掉头/alternate交替） /
-play-state指定动画状态 running，paused暂停/
-fill-mode动画结束时的状态 forwards(默认一直前冲)backwards(返回第一个开始属性)

合写(第一个是持续时间)

♥ 动画库引用

①link导入动画库css
②类名animate__animated animate__xxx

♥字体图标引用

①link导入文件
②直接引用iconfont后面再加类名，或者在线引用
③本地上传svg再重复上述流程