一、前言

今天闲来无事，就也来试试css做个立体感的盒子吧。

css的属性很多，有时候不一样的组合就能展示很多未曾设想到的效果，今天主要用到的就是transform-style，transform ，animation 和hover 这几个关键属性来实现。

最终效果如下 QQ录屏20230428104346.gif

下面我们来试试实现吧。

二、过程

1、创建挂载dom

盒子有6个面，我们先按6个面的dom结构写一下，图片是随便用的，找对位置就可以了。

<div class="imgBox">
  <div class="contentBox">
    <div class="outBox">
       <!--======================= 正方体 =======================-->
      <!-- 外前图 -->
      <div class="frontImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
      <!-- 外后图 -->
      <div class="queenImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
      <!-- 外左图 -->
      <div class="liftImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
      <!-- 外右图 -->
      <div class="rightImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
      <!-- 外上图 -->
      <div class="topImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
      <!-- 外下图 -->
      <div class="bottomImgBox"><img src="../../../../assets/login-box-bg.png" /></div>
    </div>
  </div>
</div>

理想的dom结构已经创建完成了，下面我们来开始今天的css魔法。

2、transform-style 和transform

（1）transform-style

语法

transform-style: flat|preserve-3d;

值	描述
flat	表示所有子元素在2D平面呈现。
preserve-3d	表示所有子元素在3D空间中呈现。

默认值为flat，今天我们需要修改为preserve-3d，同时transform-style需要搭配transform一起使用，不然没有效果。

（2）transform

语法

transform: none|*transform-functions*;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

用法比较多，不过今天我们只用到rotateX、 rotateY、 translateZ这几个属性。

简单给我们的outBox元素一下css样式，能得到以下效果（前提是位置和宽高都定义好了的情况下，末尾会放完整版代码）。

transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);

3、思路实现

（1）利用transform加上一点点空间3d知识

盒子6个面，分别分成了以下6个元素，通过调整，我们就能得到以下效果

.frontImgBox {
    transform: rotateY(0deg) translateZ(50px);
  }
  .queenImgBox {
    transform: translateZ(-50px) rotateY(180deg);
  }
  .liftImgBox {
    transform: rotateY(90deg) translateZ(50px);
  }
  .rightImgBox {
    transform: rotateY(-90deg) translateZ(50px);
  }
  .topImgBox {
    transform: rotateX(90deg) translateZ(50px);
  }
  .bottomImgBox {
    transform: rotateX(-90deg) translateZ(50px);
  }

（2）利用hover写一下展开效果

也是就是改一下值，具体改多少看实际情况

（3）加上旋转

总感觉加点旋转更加立体。这就加上。

旋转关键帧

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

给outBox加上点动画

animation: rotate 10s infinite;
animation-timing-function: linear; //匀速

（4）又加了个透明度和过渡自然

opacity: 0.75;
transition: all 0.4s;

4、完整css源码

.imgBox {
  position: fixed;
  bottom: 10px;
  right: 220px;
  width: 200px;
  height: 200px;
  background: #333333;
  padding: 0 20px 20px 20px;
  .contentBox {
    width: 100%;
    height: 100%;
    position: relative;
    .outBox {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transform: rotateX(-30deg) rotateY(-80deg);
      animation: rotate 10s infinite;
      animation-timing-function: linear; //匀速
      div {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
        opacity: 0.75;
        transition: all 0.4s;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .frontImgBox {
        transform: rotateY(0deg) translateZ(50px);
      }
      .queenImgBox {
        transform: translateZ(-50px) rotateY(180deg);
      }
      .liftImgBox {
        transform: rotateY(90deg) translateZ(50px);
      }
      .rightImgBox {
        transform: rotateY(-90deg) translateZ(50px);
      }
      .topImgBox {
        transform: rotateX(90deg) translateZ(50px);
      }
      .bottomImgBox {
        transform: rotateX(-90deg) translateZ(50px);
      }
    }
    .outBox:hover {
      cursor: pointer;
      .frontImgBox {
        transform: rotateY(0deg) translateZ(80px);
      }
      .queenImgBox {
        transform: translateZ(-80px) rotateY(180deg);
      }
      .liftImgBox {
        transform: rotateY(90deg) translateZ(80px);
      }
      .rightImgBox {
        transform: rotateY(-90deg) translateZ(80px);
      }
      .topImgBox {
        transform: rotateX(90deg) translateZ(80px);
      }
      .bottomImgBox {
        transform: rotateX(-90deg) translateZ(80px);
      }
    }
    @keyframes rotate {
      from {
        transform: rotateX(0deg) rotateY(0deg);
      }
      to {
        transform: rotateX(360deg) rotateY(360deg);
      }
    }
  }
}

ps: 我是地霊殿__三無,希望能帮上你。

css实现立体感