有趣的css：两种纯css方式实现⽴⽅体展示

可应用场景

3d图形制作，可制作多个正方体堆叠立方体，可自定义编辑正方体数量以及堆叠形式，直观展现实现效果。

⽬标效果

实现方式

⼀、2d⽅式(skew)

核心逻辑：使用css中的skew属性进行偏斜变换，将伪元素变为需要的平⾏四边形来拼接

• 优点：

完全按照斜⼆轴的平⾏投影图，最接近教研需要的效果图
使⽤⽅便，只需给⼀个元素设置类名，⽆需更改dom结构
可以随意精准地设置侧⾯和上⾯的宽度⾼度，在堆叠后可以精准计算出整个⽴体图的大小尺寸
样式都内聚在该元素内，只需设置好其包围盒大小，堆叠组合时不会对其它元素的显⽰造成影响

• 缺点：

skew的元素如果对其设置border会造成拼接效果差强人意（如下图，衔接处不完美）◦ 依靠box-shadow⽆法完全模拟真实border的显⽰效果，放⼤后较为明显，尤其多个⽴⽅体堆叠时会出现边界不够清晰的观感（可通过修改⾊值进⾏改善）
叠放时需要⼿动计算每⼀层的偏移数值（例如：在前⾯多⼀个⽅块时，需要同时计算x轴和y轴偏移量）

代码实现：

html 复制代码

<style>
 .cube {
     width: 100px;
     height: 100px;
     box-shadow: inset 0px 0px 1.2PX #6F94F2;
     /* border: 1px solid #6F94F2; */
     box-sizing: border-box;
     background-color: #A9C0FF;
     position: relative;
 }
 .cube::before {
     content: "";
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100px;
     height: 30%;
     box-shadow: inset 0px 0px 1.2PX #6F94F2;
     /* border: 1px solid #6F94F2; */
     box-sizing: border-box;
     background-color: #C4E2FF;
     transform: translateY(-100%) skew(-45deg);
     transform-origin: bottom;
 }

 .cube::after {
     content: "";
     position: absolute;
     top: 0px;
     right: 0px;
     width: 30%;31 height: 100px;
     box-sizing: border-box;
     box-shadow: inset 0px 0px 1.2PX #6F94F2;
     /* border: 1px solid #6F94F2; */
     background-color: #8AA8FF;
     transform: translateX(100%) skew(0deg, -45deg);
     transform-origin: left;
 }

 </style>

 <body>
     <div class="cube"></div>
 </body>

3d⽅式（translate+rotate+perspective-3d）

核心逻辑：使⽤ css中的rotate属性，设置其包围盒的perspective等相关属性来进行3d的转换

• 优点：

相⽐上⾯的⽅式，可以随便设置border属性
显⽰效果较好，作为原⽣的3d功能，很适合⽴体堆叠，需要叠放时只需要在原处再⽣成⼀个进⾏translate偏移即可（例如，在前⾯多⼀层，只需要translateZ⼀个边⻓单位）
便于在可能⽤到的透视场景中进⾏3d变换

• 缺点：

使⽤⽅式具有限制，虽然已经极度优化实现⽅案，但仍需要有⼀个⽗级来设置透视相关属性
⽆法精准计算堆叠后在⻚⾯中的2d尺⼨，也就没有办法精准去控制包围盒的大小来使其在页面中占位刚好能全部显示
显示中⽆法做到前后纵深不⼀样的⽴体块尺⼨⼀模⼀样（可以通过给perspective 和perspective-origin⼀个较⼤的值让其愈加接近）

代码实现：

html 复制代码

<style>

.container {
    transform-style: preserve-3d;
    perspective: 30000px;
    perspective-origin: 11000px -10000px;
}

.cube {
    transform-style: preserve-3d;
    width: 100px;
    height: 100px;
    border: 1px solid #6f94f2;
    box-sizing: border-box;
    background-color: #a9c0ff;
    position: relative;
 }

 .cube::before {
     content: "";
     position: absolute;
     top: -101px;
     left: -1px;
     width: 100px;
     height: 100px;
     box-sizing: border-box;
     background-color: #c4e2ff;
     border: 1px solid #6f94f2;
     transform-origin: bottom;
     transform: rotateX(90deg);
 }

 .cube::after {
     content: "";
     position: absolute;
     top: -1px;
     right: -101px;
     width: 100px;
     height: 100px;
     box-sizing: border-box;
     background-color: #8aa8ff;
     border: 1px solid #6f94f2;
     transform-origin: left;
     transform: rotateY(90deg);
 }

 </style>

 <body>
 <div>
     <div class="container">
         <div class="cube"></div>
     </div>
 </div>
 </body>

功能非本人实现，来自密友分享，觉得小功能很不错所以分享给大家，感谢观看，谢谢大家~