随着CSS3的出现，各大网站出现了许多酷炫的3D动画效果，不再局限于平面UI。下面，我就分享一下使用css 3D效果的经验。
首先，要制作3D效果

在这里插入图片描述
注：x轴平行，y轴垂直，z轴指向正对你的屏幕。z轴的零点就是屏幕所在的平面。
现在知道web浏览器的坐标轴是如何的定义后，接下来，我们需了解4个属性：

transform-style:preserve-3d;  //指定嵌套元素如何在3D空间中呈现

rotateX()  //沿X轴旋转

rotateY()  //沿Y轴旋转

translateZ()  //

1.transform-style

含义：指定嵌套元素如何在3D空间中呈现
值：flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
注：一般定义在父元素中。

2.rotateX() 和rotateY()

含义：旋转
单位：deg
3.translateZ()
含义：沿Z轴平移
注：只有在transform-style:preserve-3d情况下，才起作用。

俗话：纸上得来终觉浅，我们还是需要实践的，下面一起来看一个实例：

上面的3D 立方体是纯css3制作的。
代码如下：
在这里插入图片描述

完整代码如下

<html>
  <head>
    <meta charset="utf-8" />
    <script
      id="jqbb"
      src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
    ></script>

    <style type="text/css">
      cube {
     
     
        --s: 243px;
        --hs: calc(var(--s) / 2);
        display: block;
        width: var(--s);
        height: var(--s);
        transform-style: preserve-3d;
        will-change: transform;
        animation: r 15s linear infinite;
      }

      side {
     
     
        position: absolute;
        width: 100%;
        height: 100%;
        --sq: conic-gradient(
          from 270deg at calc(100% / 3) calc(100% / 3),
          #fff 90deg,
          transparent 0
        );
        background: var(--sq) calc(var(--s) / 3) calc(var(--s) / 3) / 100% 100%,
          var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 3)
            calc(100% / 3),
          var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 9)
            calc(100% / 9),
          var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 27)
            calc(100% / 27),
          var(--sq) calc(100% / 6) calc(100% / 6) / calc(100% / 81)
            calc(100% / 81);
        background-color: #000;
        background-blend-mode: difference;
      }

      side:nth-child(1) {
     
     
        transform: translateZ(var(--hs));
      }

      side:nth-child(2) {
     
     
        transform: translateZ(calc(-1 * var(--hs)));
      }

      side:nth-child(3) {
     
     
        transform: rotateY(90deg) translateZ(var(--hs));
      }

      side:nth-child(4) {
     
     
        transform: rotateY(-90deg) translateZ(var(--hs));
      }

      side:nth-child(5) {
     
     
        transform: rotateX(90deg) translateZ(var(--hs));
      }

      side:nth-child(6) {
     
     
        transform: rotateX(-90deg) translateZ(var(--hs));
      }

      @keyframes r {
     
     
        100% {
     
     
          transform: rotateX(1turn) rotateY(1turn) rotateZ(1turn);
        }
      }

      html,
      body {
     
     
        margin: 0;
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        overflow: hidden;
        background: #000;
        perspective: 1000px;
      }

      body:after {
     
     
        content: "";
        position: absolute;
        background: radial-gradient(circle at 50% 50%, #ff9800 1%, #673ab7);
        width: 100%;
        height: 100%;
        mix-blend-mode: lighten;
      }
    </style>
  </head>

  <body>
    <cube>
      <side></side>
      <side></side>
      <side></side>
      <side></side>
      <side></side>
      <side></side>
    </cube>
  </body>
  <script></script>
</html>