一、浏览器坐标系

从左到右的方向是浏览器x轴的正方向;

从上到下的方向是浏览器y轴的正方向;

z轴正方向是面对于我们的;
浏览器坐标系

二、3D变换

  • transform-style建立3D空间

    transform-style: preserve-3d;
  • perspective 景深

    perspective: 300px;
    > 景深是指相机对焦点前后相对清晰的成像范围。景深就是我们的肉眼距离显示器的距离。景深越大,元素离我们越远,效果就不好 
    
  • perspective- origin 景深基点

    // 即站在那个方位看物体,默认是center center
    // left top即左上角位置看物体
    perspective-origin: left top;
  • transform 新增函数

    - rotateX()
    - rotateY()
    - rotateZ()
    - translateZ()
    
    transform: rotateX(360deg);
    transform: rotateY(360deg);
    transform: rotateZ(360deg);  // 即是旋转效果
    transform: translateZ(-100px);  // 即往前或往后(放大缩小),另外效果也受到景深的影响 
    > 案例: 立体矩形
    
    > 案例: 轮播图(立体切换效果)
    
    
  • rotateX()让元素绕着x轴旋转,角度越大,元素绕着x轴顺时针旋转rotateX类似秋千运动

    ![rotateX类似秋千运动](https://upload-images.jianshu.io/upload_images/1801379-f52f574a1c419720.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
  • rotateY()让元素绕着y轴旋转,角度越大,元素绕着y轴顺时针旋转 rotateY类似钢管舞运动

    ![rotateY类似钢管舞运动](https://upload-images.jianshu.io/upload_images/1801379-8750c5de90433994.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
  • rotateZ()让元素绕着z轴旋转,角度越大,元素绕着z轴顺时针旋转 rotateZ类似于方向盘转动

    ![rotateZ类似于方向盘转动](https://upload-images.jianshu.io/upload_images/1801379-889aba3d2c68ef5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

三、animation动画

  • 关键帧——keyFrames

    - 类似于flash
      只需指明两个状态,之间的过程由计算机自动计算
    - 关键帧的时间单位
      数字:0%、25%、100%等
      字符:from(0%)、to(100%)
    - 格式1
      @keyframes 动画名称
      {  动画状态  }
    #box{
      // 动画时长、动画名称
      animation: 2s Move;
    }
    @keyframes Move{
      0%{
      width: 100px;
      }
      100%{
      width: 400px;
      }
    }
    #box{
      // 动画时长2s、延迟3s、动画名称
      animation: 2s 3s Move;
    }
    @keyframes Move{
      from{
    width: 150px;
    background: blue;
       }
      to{
    width: 300px;
    background: purple;
      }
    }
  • animation-timing-function 动画运动形式

    - linear  匀速
    - ease  缓冲
    - ease-in  由慢到快
    - ease-out  由快到慢
    - ease-in-out  由慢到快再到慢
    - cubic-bezier(number, number, number, number)  特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内
  • animation-delay 动画延迟

    只是第一次
  • animation-iteration-count 重复次数

    infinite为无限次
  • animation-play-state 播放状态

    - running 播放 
    - paused 暂停
  • animation-direction 播放前重置

    动画是否重置后再开始播放
    - alternate    动画直接从上一次停止的位置开始执行
    - normal    动画第二次直接跳到0%的状态开始执行
    > 案例: 无缝滚动

本文由 zyz 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

楼主残忍的关闭了评论