如何利用CSS3实现立方体

CSS3中新增了过渡属性和3D效果，我们可以利用这个实现一个立方体，此处介绍两个属性：

• perspective，视距，即人眼到屏幕的距离，可以是元素的子元素获得近大远小地效果（潜台词：加给父元素不要加给自己，不然没效果）
• transform：preserve-3d（默认是flat，2D元素）；依旧是加给父元素，让子元素保留3D的位置。只有加了这个属性，元素才能真的算是3D元素

这时候就有疑问，这两种属性有什么区别。简而言之，perspective属性只能说是一个工具，可以让人比较直观的看出3D效果，其实加不加都可以，但是transform：preserve；是一定要加的

言归正传，其实实现立方体有很多种思路，下面介绍一种

1. 父盒子设置transform：preserve；变为相对定位
2. 六个面即六个子元素绝对定位，统统left：0，此时六个面重叠
3. 正面：位置不变
4. 底面：转换原点变为底部，绕x轴正方向旋转90度
5. 左侧：z轴负方向走盒子一半的距离，x轴负方向走盒子一半距离，然后绕y轴负方向旋转270度（我主要是想让盒子上的文字正常显示朝外显示，不考虑这个的话正方向负方向都可以）
6. 右侧：和左侧大同小异，x轴正方向走盒子一半距离，z轴负方向走盒子一半距离，然后绕y轴正方向转279度
7. 背侧：直接z轴负方向走整个盒子的距离
8. 顶部：转换原点变成底部，y轴负方向走整个盒子的距离，然后绕x轴正方向旋转90度

具体实现代码如下：

<ul>
   <li class="box1">1</li>
   <li class="box2">2</li>
   <li class="box3">3</li>
   <li class="box4">4</li>
   <li class="box5">5</li>
   <li class="box6">6</li>
 </ul>

 <style>
 ul {
   width: 100px;
   height: 100px;
   margin: 200px auto;
   /* perspective: 1000px; */
   transform-style: preserve-3d;
   position: relative;
  
   transition: all 5s;
   list-style: none;
 }
 ul:hover{

   transform: rotateX(360deg) rotateZ(360deg);
 }
 li {
   color: aliceblue;
   text-align: center;
   box-sizing: border-box;
   padding-top: 50px;
   position: absolute;
   left: 0;
   width: 200px;
   height: 200px;
   background-color: rgb(132, 51, 143);
 }
 
 .box2 {
 transform: translateX(-100px) translateZ(-100px) rotateY(-270deg);
 background-color: brown;
 }
 /* 左面 */

 .box3{
   transform: translateX(100px) translateZ(-100px) rotateY(270deg);
   background-color: rgb(12, 6, 102);
 
 }
 /* 右面 */


.box4 {
  transform-origin: bottom center;
 transform: translateZ(-200px) rotateX(-90deg);
 background-color: rgb(34, 5, 5);
 }
/* 底面 */

.box5 {
 transform-origin: bottom center;
transform: translateY(-200px) rotateX(90deg);
background-color: rgb(233, 169, 85);

}
/* 顶部 */

.box6 {
  transform: translateZ(-200px);
  background-color: rgb(15, 87, 87);
}

 
 </style>

为了直观的看到效果，添加了动画效果，如下（好吧我懒得做gif，就直接截图好了）

这样就成功了