3D空间转换/动画效果

汪帅帅帅帅

已于 2022-07-20 21:47:56 修改

阅读量130

点赞数 3

文章标签：学习动画前端 html5 css

于 2022-07-18 21:35:30 首次发布

本文链接：https://blog.csdn.net/weixin_72297531/article/details/125860433

版权

本文详细介绍了3D坐标系、位移、透视、旋转（rotateX, rotateY, rotateZ）、立体呈现、动画原理及实践，包括关键帧动画和逐帧动画示例，适合前端与3D开发者深入理解并运用到实际项目中。

摘要由CSDN通过智能技术生成

3d空间转换

3d坐标系

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

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

1.X 轴往右越大，是正值，否则反之

2.Y 轴往下越大，是正值，否则反之

3.Z轴（指向我们）越大，是正值，否则反之

3d位移

语法:

完整写法

transform: translate3d(x, y, z);

一般都是分开写

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

透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

1.为了看到z轴的效果

2.近大远小,近实远虚

3.一定给父亲添加

4.值推荐为800-1200px

perspective: 800px;

3d旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

x轴旋转正值是从上往下翻负值是从下往上翻

注意：默认的旋转中心在盒子的中心位置。

 body {
     /* 父级添加透视 */
     perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateX(360deg);
}

rotateY

类似钢管舞。

y轴旋转正值是从左往右翻负值是从右往左翻

body {
    perspective: 400px;
}

img {
    transition: all 1s;
}

img:hover {
    transform: rotateY(360deg);
}

rotateZ

z轴旋转在转圈

旋转的综合写法

transform: rotate3d(1, 1, 1, 360deg);

立体呈现

开启3d效果

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

transform-style: preserve-3d;

动画

动画属性

动画animation:动画名动画执行时间动画速度动画的延迟时间动画执行次数动画方向执行完毕时状态

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

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2,调用动画 */
            animation: move 6s;
        }

        /* 1,定义一个动画 */
        @keyframes move {

            /* from 来自于哪里 */
            /* 可以省略 */
            from {
                transform: translate(0, 0);
            }

            /* to 去往哪里 */
            to {
                transform: translate(1000px, 500px) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

鼠标经过暂停动画

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

多组动画

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

补间动画和逐帧动画

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .one {
            /* 补间动画 */
            animation: move 2s linear;
        }

        .two {
            margin-top: 100px;
            background-color: yellowgreen;
            /* 帧动画 */
            animation: move 2s steps(20);
        }

        @keyframes move {
            100% {
                transform: translate(400px, 0);
            }
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>