当前位置：首页 > news >正文

CSS空间转换

news 2025/7/9 23:32:43

文章目录

- 01-空间转换transform: translate3d()
- - 空间转换简介
  - 平移
  - 视距
  - 旋转 rotateXYZ()
  - 左手法则
  - 旋转rotate3d()
  - 立体呈现(transform-style)
  - 案例-3d导航
  - 案例筛子
  - 缩放
- 02-动画animation
- - 动画实现步骤
  - 复合属性
  - 拆分写法animation-play-state()
  - 多组动画

01-空间转换transform: translate3d()

空间转换简介

空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同(垂直于电脑屏幕)。
空间转换也叫 3D转换
属性：transform

在这里插入图片描述

平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果
/* 电脑是平面，默认无法观察 Z 轴平移效果 需要给父级添加视距(下一节)*/
transform: translate3d(100px, 200px, 300px);

视距

视距：人到电脑屏幕的距离

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果

透视效果：近大远小、近实远虚

属性：(添加给父级，取值范围 800-1200)

perspective(代表下图的d): 视距;
transform: translateZ();代表啊Z

在这里插入图片描述

旋转 rotateXYZ()

Z 轴：rotateZ() ：垂直于电脑屏幕，相当于竹蜻蜓，扇叶是xy轴的平面，竹柄垂直于屏幕。

<style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box img:hover {
        transform: rotateZ(360deg);
      }
    </style>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>

在这里插入图片描述

X 轴：rotateX() 相当于竹蜻蜓，扇叶是xz轴的平面，竹柄是屏幕水平方向。

<style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateX(60deg);
        transform: rotateX(-60deg);
      }
    </style>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>

Y 轴：rotateY() 相当于竹蜻蜓，扇叶是yz轴的平面，竹柄是屏幕垂直方向。

<style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box {
        /* 透视效果：近大远小，近实远虚 */
        perspective: 1000px;
      }

      .box img:hover {
        transform: rotateY(60deg);
        transform: rotateY(-60deg);
      }
    </style>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>

左手法则

作用：根据旋转方向确定取值正负

使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

在这里插入图片描述

旋转rotate3d()

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度,（四个参数全是必选参数）
x，y，z 取值为0-1之间的数字

立体呈现(transform-style)

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

flat：子级处于平面中
preserve-3d：子级处于 3D 空间

案例-3d导航

在这里插入图片描述

案例步骤：

搭建立方体
1. 绿色是立方体的前面
2. 橙色是立方体的上面
鼠标悬停，立方体旋转

在这里插入图片描述

.nav li {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;

  transform-style: preserve-3d;

  /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
  /* transform: rotateX(-20deg) rotateY(30deg); */
}

.nav li a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/* 立方体每个面都有独立的坐标轴，互不影响 */
.nav li a:first-child {
  background-color: green;
  transform: translateZ(20px);
}

.nav li a:last-child {
  background-color: orange;
  transform: rotateX(90deg) translateZ(20px);
}

.nav li:hover {
  transform: rotateX(-90deg);
}

案例筛子

缩放

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

02-动画animation

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

动画实现步骤

定义动画

/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}

使用动画

animation: 动画名称 动画花费时长;

复合属性

在这里插入图片描述

提示：

动画名称和动画时长必须赋值
动画时长必须加单位否则无效
取值不分先后顺序
如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

拆分写法animation-play-state()

在这里插入图片描述

<style>
      .box {
        width: 200px;
        height: 100px;
        background-color: pink;

        /* linear：匀速 */
        animation: change 1s linear;

        /* steps：分步动画，工作中，配合精灵图实现精灵动画 */
        animation: change 1s steps(3);

        /* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
        animation: change 1s 2s;

        /* 重复次数，infinite：无限循环 */
        animation: change 1s 3;
        animation: change 1s infinite;

        /* alternate：反向 */
        animation: change 1s infinite alternate;

        /* 动画执行完毕时的状态， forwards：结束状态； backwards：开始状态（默认） */
        animation: change 1s forwards;
        animation: change 1s backwards;
      }
    
      .box:hover {
        /* 暂停动画 动画在谁身上，就给他的鼠标悬停伪类加animation-play-state: paused;*/
        animation-play-state: paused;
      }

      /* 宽度 从 200 变化到 800 */
      @keyframes change {
        from {
            width: 200px;
        }
        to {
            width: 800px;
        }
      }

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

多组动画

animation: 
  动画一,
  动画二,
  ... ...
;

	<style>
    div {
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./bg.png);
      animation: 
        move 0.5s steps(12) infinite,
        run 3s linear forwards;
    }

    @keyframes move {
      from {
        background-position:url(./bg.png) 0 0;
      }

      to {
        background:url(./bg.png) -1680px 0;
      }
    }
    @keyframes run {
      from {
        transform: translate(0);
      }

      to {
        transform: translate(800px);
      }
    }
  </style>
  <div></div>