如何给div的四个角设置正方体

你可以使用CSS3的transform和perspective属性来实现给div的四个角设置正方体的效果。

首先，在div的CSS样式中设置perspective属性，该属性定义了3D元素的透视效果。然后，使用transform-style: preserve-3d属性将div的子元素转换为3D空间。最后，在子元素的CSS样式中使用transform属性，将子元素旋转45度，并设置宽度和高度相等，即可实现正方体效果。

下面是一个示例代码：

HTML代码：

<div class="box">
  <div class="cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
  </div>
</div>

CSS代码：

.box {
  perspective: 1000px;
}

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

.front {
  transform: translateZ(50px);
}

.back {
  transform: rotateY(180deg) translateZ(50px);
}

.left {
  transform: rotateY(-90deg) translateZ(50px);
}

.right {
  transform: rotateY(90deg) translateZ(50px);
}

.top {
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

这段代码将会创建一个正方体，其中div.box是包含整个正方体的容器，div.cube是正方体的核心。通过在正方体的六个面上设置不同的CSS转换，可以创建立体效果。