前端基础CSS3-（3D动画）

最新推荐文章于 2025-10-30 09:01:25 发布

原创最新推荐文章于 2025-10-30 09:01:25 发布 · 680 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端基础

本文详细介绍了CSS3中的3D动画特性，包括透视属性、3D移动、3D旋转以及如何开启元素的3D立体效果。通过实例解析了如何使用translate3d和rotate3d实现3D移动和旋转，以及如何利用transform-style和perspective创建3D旋转木马效果。

一、透视属性；定义虚拟眼睛， perspective: ；

1.透视写到被观察元素的父盒子上面

2.当透视值小于z值的时候，是什么都看不见的，

3. z值就是物体到屏幕的距离，

4. 而透视，就是虚拟眼睛到屏幕的距离

 body {
  
        perspective: 500px;
      }

二、3D移动

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

1. translateZ 沿着Z轴移动

2. translateZ 后面的单位我们一般跟px

3. translateZ(100px) 向外移动100px （向我们的眼睛来移动的）

4. 3D移动有简写的方法

transform: translate3d(x,y,z);

transform: translate3d(100px, 100px, 100px);

5. xyz是不能省略的，如果没有就写0 ；

三、3D旋转

沿着x轴进行旋转，左手法则：大拇指指向X轴正方向，剩下四个手指微微弯曲，指向即是正值旋转方向

transform: rotateX(180deg);

沿着y轴旋转,左手法则，大拇指指向y轴正方向，剩下四个手指即是正值旋转方向

transform: rotateY(180deg);

沿着 z轴的转向和2d的旋转效果基本一致，正值顺时针，负值逆时针

transform: rotateZ(180deg);

合写

transform: rotate3d(x,y,z,45deg); （一般不会合写）

沿着向量轴旋转

1和0就是表示矢量值，当x为1，y为1，就是在x和y的中线进行旋转，即向量轴

transform: rotate3d(1, 1, 0, 45deg);

直线L即可看做是向量轴

四、开启元素3D立体效果

让子元素保持3d立体空间环境，写在父元素，但是子元素生效

transform-style的值： flat默认不开启；preserve-3d开起立体空间

    transform-style: preserve-3d;

旋转木马案例

思路：

把一个盒子看做整体，为其定义一个父盒子；

在子盒子内部放置6张图片，利用3D移动和旋转的效果，以及空间思维，先旋转再移动，让其6张图变为立体的效果；

因为是为图片开启立体效果，所以transform-style写在子盒子里面；

父盒子则放置透视，最后为子盒子整体定义并调用动画即可。

<body>
    <section>
      <img src="../img/99.jpg" alt="" />
      <img src="../img/99.jpg" alt="" />
      <img src="../img/99.jpg" alt="" />
      <img src="../img/99.jpg" alt="" />
      <img src="../img/99.jpg" alt="" />
      <img src="../img/99.jpg" alt="" />
    </section>
  </body>

<style>
      body {
        perspective: 1200px;
        background-color: #ccc;
      }
      section {
        position: relative;
        width: 300px;
        height: 400px;
        margin: 200px auto;
        /* background-color: pink; */
        transform-style: preserve-3d;
        /* transition: all 3s; */
        animation: move 6s linear infinite;
      }
      @keyframes move {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(360deg);
        }
      }
      section img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: skyblue;
        background: url(img/99.jpg) no-repeat;
      }
      section img:nth-child(1) {
        transform: translateZ(300px);
      }
      section img:nth-child(2) {
        transform: rotateY(60deg) translateZ(300px);
      }
      section img:nth-child(3) {
        transform: rotateY(120deg) translateZ(300px);
      }
      section img:nth-child(4) {
        transform: rotateY(180deg) translateZ(300px);
      }
      section img:nth-child(5) {
        transform: rotateY(240deg) translateZ(300px);
      }
      section img:nth-child(6) {
        transform: rotateY(300deg) translateZ(300px);
      }
    </style>

标签

#css3 #动画 #html5