前端css实现3D魔方，先看一下效果图：

盒子布局

将3D魔方的6个面包裹在一个父盒子中

<div class="content">
  <div class="parent">
    <div class="div1">上</div>
    <div class="div2">下</div>
    <div class="div3">左</div>
    <div class="div4">右</div>
    <div class="div5">前</div>
    <div class="div6">后</div>
  </div>
</div>

添加3D效果

给父盒子添加相对定位和3D属性

.parent {
    /* 相对定位 */
    position: relative;
    width: 400px;
    height: 400px;
    margin: 200px auto;
    /* 3D属性 */
    transform-style: preserve-3d;
    /* 旋转动画 */
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

给子盒子添加绝对定位，并移动、旋转子盒子

.parent>div {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid pink;
  font-size: 40px;
  line-height: 400px;
  text-align: center;
}

.div1 {
  top: -50%;
  color: yellow;
  transform: rotateX(90deg);
}

.div2 {
  top: 50%;
  color: white;
  transform: rotateX(90deg);
}

.div3 {
  left: -50%;
  color: red;
  transform: rotateY(90deg);
}

.div4 {
  left: 50%;
  color: orange;
  transform: rotateY(90deg);
}

.div5 {
  transform: translateZ(200px);
  color: blue;
}

.div6 {
  transform: translateZ(-200px);
  color: green;
}

效果：

给父盒子添加动画效果

.parent {
  /* 相对定位 */
  position: relative;
  width: 400px;
  height: 400px;
  margin: 200px auto;
  /* 3D属性 */
  transform-style: preserve-3d;
  /* 旋转动画 */
  animation-name: rotate;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
  	transform: rotateX(0) rotateY(0)
  }

  100% {
  	transform: rotateX(360deg) rotateY(360deg)
  }
}

整体代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转魔方</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        .content {
            perspective: 1000px;
        }

        .parent {
            /* 相对定位 */
            position: relative;
            width: 400px;
            height: 400px;
            margin: 200px auto;
            /* 3D属性 */
            transform-style: preserve-3d;
            /* 旋转动画 */
            animation-name: rotate;
            animation-duration: 10s;
            animation-iteration-count: infinite;
        }

        .parent>div {
            position: absolute;
            width: 400px;
            height: 400px;
            border: 1px solid pink;
            font-size: 40px;
            line-height: 400px;
            text-align: center;
        }

        .parent>div:hover {
            background-color: currentColor;
            box-shadow: 0 0 100px currentColor;
        }

        .div1 {
            top: -50%;
            color: yellow;
            transform: rotateX(90deg);
        }

        .div2 {
            top: 50%;
            color: white;
            transform: rotateX(90deg);
        }

        .div3 {
            left: -50%;
            color: red;
            transform: rotateY(90deg);
        }

        .div4 {
            left: 50%;
            color: orange;
            transform: rotateY(90deg);
        }

        .div5 {
            transform: translateZ(200px);
            color: blue;
        }

        .div6 {
            transform: translateZ(-200px);
            color: green;
        }

        @keyframes rotate {
            0% {
                transform: rotateX(0) rotateY(0)
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg)
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="parent">
            <div class="div1">上</div>
            <div class="div2">下</div>
            <div class="div3">左</div>
            <div class="div4">右</div>
            <div class="div5">前</div>
            <div class="div6">后</div>
        </div>
    </div>
</body>

</html>