浅学一点空间转换3D和动画知识

Diiiy

已于 2022-10-05 20:53:48 修改

阅读量168

点赞数

分类专栏：前端文章标签： 3d 动画前端

于 2022-10-05 20:51:32 首次发布

本文链接：https://blog.csdn.net/qwerrerfjj/article/details/127176425

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

一 . 空间转换3D

3D坐标系

3D坐标系比2D多了一个Z轴.

一定要记住3个坐标轴取值的正反：

X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

1 . 3D位移

完整写法 :

 transform: translate3d(x, y, z);

分开写法 :

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

2 . 3D旋转

绕x轴旋转 :

transform: rotateX(90deg);

绕y轴和z轴同理.

完整写法 :

div:hover {
            transform: rotate3d(0, 0.5, 1, 90deg);
        }

        /* 3D旋转的综合写法 rotate3d(x, y, z, 度数) x,y,z取0-1,类似于opacity */
        /* transform: rotate3d(0,0.5,1,90deg); *

左手法则

规则：

大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向
大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

3 . 透视

语法规范 :

perspective: 800px;

 /* 1. 透视给父级添加 */
 /* 2. 近大远小 近实远虚 */
 /* 3. 透视取值在800px ~ 1200px  */

4 . 立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

 transform-style: preserve-3d;

二 . 动画

1 . 动画步骤

首先定义动画 :

/* 定义动画  */
        @keyframes move {

            /* 起始位置 */
            0% {}

            25% {
                transform: translate(800px, 0) rotateZ(360deg);
            }

            50% {
                transform: translate(800px, 400px) rotateZ(720deg);
            }

            75% {
                transform: translate(0, 400px) rotateZ(1080deg);
            }

            /* 结束位置 */
            100% {
                transform: translate(0, 0) rotateZ(1440deg);
            }

        }

接着调用动画 :

animation: move 5s linear 1s infinite alternate forwards;

2 . 动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

/* 调用动画 animation: 动画名 执行时间 动画速度 开始时间 循环次数 动画方向 结束状态 */
/* 动画结束状态不能和动画循环次数和动画方向同时使用 */
/* animation: backwards;结束停在第一帧 */
/* animation: move 5s linear 1s forwards; */

3 . 鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {
    animation-play-state: paused;
}

4 . 多组动画用逗号隔开

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;