二.空间转换与动画

一颗胖头橙子

已于 2022-07-19 16:08:21 修改

阅读量69

点赞数

文章标签：动画 css3 html5 前端 javascript

于 2022-07-19 16:06:05 首次发布

本文链接：https://blog.csdn.net/m0_72430529/article/details/125860686

版权

1.3D坐标系

3D坐标由x,y,z三条轴组成,三条轴可以构成一个空间结构,x轴是水平方向的,y轴是垂直方向的,z轴以一条与我们的视线方向相同的一条轴.

X轴右是正值,左是负值

Y轴往下是正值,往上是负值

Z轴是面对自己的方向,面对自己是正值,反之则是负值

空间转换也叫3D转换,其属性是:transform

2.3D位移

语法

transform: translate3d(x水平方向, y垂直方向, z视线方向);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）

像素单位数值

百分

(但由于z轴的方向是与视线方向相同,所以设置translateZ我们的眼睛看不出任何变化,需要配合perspective透视属性才能看出)

3.透视

属性:perspective: px;(给父级元素添加)

取值一般给800px-1200px

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

我对透视的理解:因为z轴是面向自己的轴,默认给z轴值的情况下,我们人的视觉是看不出来的,所以要加一个透视属性,透视属性可以理解为人眼到电脑屏幕的距离,取值推荐在800-1200px 根据近大远小,近实远虚的视觉特点,我们就可以看出设了z轴的元素离我们越来越近或越来越远的效果

4.3D旋转

语法

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值);

通过左手法则判断旋转方向:

左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

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

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

旋转 Z轴旋转在转圈

案例---鼠标悬停出现三层盒子的3D效果

<!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>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 3s;
        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .box .one {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: yellowgreen;
            transform: translateZ(-100px);
        }

        .box .two {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            transform: translateZ(100px);
        }
    </style>
</head>

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

</html>

5.3D缩放

语法

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

<!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>
        body {
            perspective: 800px;
        }

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

        .box:hover {
            /* scaleX  放大的是宽 */
            /* transform: scaleX(2); */
            /* scaleY  放大的是高 */
            /* transform: scaleY(2); */
            /* scaleZ  z轴必须配合透视+旋转一起使用*/
            transform: scaleZ(10) rotateX(90deg);
        }
    </style>
</head>

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

</html>

效果图:

6.动画(重点)

首先我们需要将动画与过渡区分开来,过渡的状态只有两个默认状态和鼠标悬停状态,他是可以实现2个状态间的变化过程,动画可以实现多种状态的变化,动画过程可控.

实现动画的步骤:

1.定义动画

@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

或者是

  @keyframes dance {

       0% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

2.调用动画

animation:动画名称动画执行时间;

img {
    width: 200px;
    /* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/
    animation: dance .5s infinite;
}

动画相关属性

animation:动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;

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

鼠标经过暂停动画

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

多组动画(多组动画用逗号隔开)

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

逐帧动画

使用 steps实现逐帧动画

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)；

将动画过程等分成N份

案例:

精灵动画制作步骤

准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

添加速度曲线 steps(N) ，N与精灵图上小图个数相同

添加无限重复效果

<!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>
        .box {
            width: 140px;
            height: 140px;
            background-color: pink;
            background-image: url(./images/bg.png);
            animation: run 1s steps(12) infinite, move 2s linear infinite;
        }

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

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

        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(800px, 0);
            }
        }
    </style>
</head>

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

</html>