[游戏开发] 前端web-空间转换和动画

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 前端web-空间转换和动画 -> 正文阅读

[游戏开发]前端web-空间转换和动画

空间转换和动画

- 空间转换
- 动画

空间转换

空间转换介绍

坐标轴:X、Y、Z(Z轴与用户视线方向重叠)
某个坐标轴位移:translateX();translateY();translateZ()

透视

作用:产生近大远小，近实远虚的视觉效果
写法:perspective: 值添加给父级;取值一般800-1200px之间

请添加图片描述

  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

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

空间旋转

旋转: rotateX();rotateY();rotateZ()

缩放

完整写法:scale3d(x, y, z)
某个坐标轴缩放:scaleX();scaleY();scaleZ()

动画

定义动画

@keyframes{
from {}
to {}
}
@keyframes{
0% {}
20% {}
50% {}
100% {}
}

使用动画

animation: 动画名称动画时长;

animation属性

复合属性 animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

在这里插入图片描述

逐帧动画

核心：动画速度曲线为steps(N)；N与精灵图小图个数相同

请添加图片描述

  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite, 
      translate 3s linear forwards;
    }

    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }

    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>