[游戏开发] 空间转换，动画的说明与使用

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

-> 游戏开发 -> 空间转换，动画的说明与使用 -> 正文阅读

[游戏开发]空间转换，动画的说明与使用

空间转换
平面转换是2D，而空间转换是3D：
平面转换：分X轴，Y轴
空间转换：分X轴，Y轴，Z轴

空间位移
语法：
transform:translate3d(x,y,z)

transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)

取值（正负均可）：

像素单位数值
百分比

注意：默认情况设置X，Y，Z是不会达到预期效果

perspective属性实现透视

属性（添加给父级）

perspective:值；
取值：像素单位数值，数值一般在800 - 1200（值越小，效果越明显；值越大，效果越不明显）
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离（视觉效果）

空间旋转
使用rotate实现元素空间旋转效果

语法：

transform:rotateZ(值)；相当于平面内旋转
transform:rotateX(值); 相当于平面为轴（横），由外到内
transform:rotateY(值)；相当于平面为轴（竖），由外向内

左手法则：
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向
在这里插入图片描述
拓展

rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
x,y,z取值为0 - 1之间的数字

立体呈现
结合之前的perspective透视属性，是否能呈现立体图形？
答：不能，perspective只增加近大远小，近实远虚的视觉效果

实现方法：

添加transform-style:preserve-3d;
使子元素处于真正的3d空间
默认值flat,表示子元素处于2D平面内呈现

示例
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            line-height: 200px;
            text-align: center;

             /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
            line-height: 200px;
            text-align: center;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">橙色</div>
        <div class="back">绿色</div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
空间缩放
语法

transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);

动画

animation添加动画效果

过渡实现的效果：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放，最终画面，是否暂停）

动画本质：是快速切换大量图片时在人脑中形程的具有连续性的画面

构成动画的最小单元：帧或动画帧

动画的实现步骤
1.定义动画

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

@keyframes 动画名称 {
0% {}
10% {}
15% {}
100% {}
}
注：百分比是指动画执行时间比

2.使用动画(写在要实现动画的主体里)
animation: 动画名称 动画花费时长;

示例：
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 1s;
        }

        /* 一. 定义动画：从200变大到600 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        

        /* 二. 定义动画：200 到 500*300 到 800*500 */
        /* 百分比指的是动画总时长的占比 */
        @keyframes change {
            0% {
                width: 200px;
            }
            50% {
                width: 500px;
                height: 300px;
            }
            100% {
                width: 800px;
                height: 500px;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>