CSS——空间转换和动画_空间转动 z轴变没-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_48613863/article/details/124005782

本文详细介绍了CSS3中的3D空间转换，包括translate3d、rotateZ、rotateX、rotateY以及perspective属性，展示了如何实现空间位移、旋转和缩放。通过示例代码解释了如何创建透视效果、立体图形以及空间旋转。同时，文章还探讨了CSS3动画的原理和应用，包括定义动画的关键帧、动画复合属性、速度曲线以及逐帧动画的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、空间转换

空间：x、y、z三个坐标轴，z轴和用户的视线在一条直线上，z轴的正轴指向用户自己；空间转换也叫3D转换；（不是网页开发重点、因为目前设计师追求简洁风，空间转换用得少）

属性：transform

1、空间位移：

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）：像素单位数值；百分比。

只是这样，看不出来z轴的效果，因为视觉上有近大远小的情况，距离近就看的清除，距离远，就看起来模糊。想要看出来z轴的效果，要依赖于另一个属性（perspective）

z轴向用户走近了，就会变得清除；

使用perspective属性实现透视效果：透视效果就是近大远小的视觉效果。

这个属性添加给父级，perspective: 值;取值：像素单位数值，数值一般在800 – 1200。

加了这个效果以后，看起来像盒子变大了，但是并没有变大，这只是一个视觉效果，近大远小；

perspective属性也叫做视距，透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离，属性值就是这个距离。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <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>

</html>

2、空间旋转

transform: rotateZ(值)；沿着z轴去旋转

transform: rotateX(值)；也要加perspective属性，正数向屏幕里面转，负数反之；

transform: rotateY(值); 也要加perspective属性

左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。

立体呈现：

（在父级）添加 transform-style: preserve-3d;（默认的值是flat，也就是2D呈现）

使子元素处于真正的3d空间；

实现立体图形：父级元素命名为cube，子级分别是前面和后面。给父级设置宽高背景色，还有过渡，给子级设置颜色，因为这个时候都是标准流，所以后面的会在下一行，于是用定位，给两个子级设置绝对定位，给父级设置相对定位，这就是保证了他们的位置先在正确的地方；然后给父级添加 transform-style: preserve-3d;让其变成3D图形；但这个时候后面的颜色在前面，因为写在下面的，于是transform: translateZ(200px);让前面的向我走近，再对父级设置hover旋转。

<!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;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

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

3、空间缩放

大于1是放大，小于1缩小；

二、动画

两个状态的切换用过渡，多个状态的转变用动画，动画过程可控（重复播放、最终画面、是否暂停）

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

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

1、实现动画

实现动画有两步：

1、定义动画：下面有两种定义动画的方式，左边的实现两种状态的动画，右边的实现多种状态的动画，百分比指的是动画总时长的占比；

2、使用动画：

使用动画，一刷新页面就有效果，不用hover。

<!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>

2、animation复合属性

速度曲线：这个变化是加速运动还是匀速运动等，如linear代表匀速运动；

animation: change 1s linear;

还可以有分步动画steps，把整个动画分成几步实现：

animation: change 1s steps(3) 1s 3;

延迟时间：控制动画的先后出场顺序，能让这个动画等一会再执行效果；

重复次数：默认状态只是动一次，无限循环也是设置重复次数，不写具体的数字，写infinite；

动画方向：有正有反，从左到右，从右到左；取值写alternate；

执行完毕时的状态：让动画停留在最开始的状态，也可以让动画停留在最终的状态。要设置这个属性，就不能无限循环和动画方向。backwords表示停在开始状态（默认值），forwords表示停在最终的状态。

animation也可以拆分写：

这些属性有两个时间的值，永远都是动画时长在延迟时间前面。

3、逐帧动画

补间动画：比如一个钟的秒表一直移动着走；

逐帧动画：比如一个钟的秒表一秒跳一下，一秒跳一下。

一般的动画都是补间动画。

逐帧动画配合精灵图做动画的时候用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;
      /* border: 1px solid #000; */
      background-image: url(./images/bg.png);

      /* 12: 净零小图的个数 */
      animation: 
        move 1s steps(12) infinite,
        run 1s forwards
      ;
    }


    @keyframes move {
        /* from {
          background-position: 0 0;
        } */
        to {
          /* 1680: 精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }

    /* 定义一个盒子移动的动画  800px */
    @keyframes run {
      /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
      /* from {
        transform: translateX(0);
      } */
      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

精灵图动画，肯定是要先把精灵图放好，在谁身上实现动画，就把animation 放在哪个身上；然后分两步实现动画，需要注意的是这里是逐帧动画，有无限循环，还有animation里面的属性是空格隔开。这里有使用到两种动画，分别是精灵图里面小图片的移动和整个box的移动。因为不是原地跑步。