Html 创建一个立方体书架

我已经搜索了一段时间，并尝试了一些不起作用的东西，但我想使用css创建一个固定的立方体外观的书架。 有人对我怎么做有什么建议吗？ 我已经包括了我想创造的图片

谢谢

 .scene {
   margin: 100px;
   width: 150px;
   height: 150px;

   perspective: 600px;
 }
  .cube {
    position: relative;
    width: inherit;
    height: inherit;

    transform-style: preserve-3d;
    transform: rotateY(180deg);
 }     
 .cube-face {
    width: inherit;
    height: inherit;
    position: absolute;
    background: red;
    opacity: 0.8;
 }
 .cube-face-front {
   background: yellow;
   transform: translate3d(0, 0, 150px/2);
 } 
 .cube-face-back {
   background: orange;
   transform: rotateY(180deg) translate3d(0, 0, 150px/2);
 } 
 .cube-face-left {
   background: green;
   transform: rotateY(-90deg) translate3d(0, 0, 150px/2);
 } 
 .cube-face-right {
  background: magenta;
  transform: rotateY(90deg) translate3d(0, 0, 150px/2);
 } 
 .cube-face-top {
  background: blue;
  transform: rotateX(90deg) translate3d(0, 0, 150px/2);
 } 
 .cube-face-bottom {
  background: red;
  transform: rotateX(-90deg) translate3d(0, 0, 150px/2);
 }


<div id="bookshelf" class="container-fluid">
    <div class="scene">
        <div class="cube">
            <div class="cube-face  cube-face-front"></div>
            <div class="cube-face  cube-face-back"></div>
            <div class="cube-face  cube-face-left"></div>
            <div class="cube-face  cube-face-right"></div>
            <div class="cube-face  cube-face-top"></div>
            <div class="cube-face  cube-face-bottom"></div>
        </div>
    </div>
</div>

---

您复制了项目SCS，并用设置的宽度替换了变量。SCS的内容远不止变量，其中之一就是数学：

 transform: rotateY(180deg) translate3d(0, 0, 150px/2); 

这一行是无效的CSS，如果没有calc函数，您不能在CSS中进行除法。即使这样，也不是所有的风格都适用

将其更改为：

transform: rotateY(180deg) translate3d(0, 0, 75px);

---

下面是一个可行的方法

试试这样的方法：

标记：

<div id="bookshelf" class="container-fluid">
    <!--top-->
    <div class="scene text-center">
        <div class="cube"></div>
    </div>
    <div class="scene text-center">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <div class="scene">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <div class="scene text-center">
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
    <!--bottom-->
    <div class="scene text-center">
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
</div>

---

到目前为止你试过什么？一个很好的起点是谷歌搜索一些3d css立方体，并应用边框、内部阴影和外部阴影。但这并不是浏览器不可知论，尽管它在大多数现代浏览器中都应该起作用。我一直在尝试使用立方体，但无法让它像盒子一样排列。基本上我是一个正方形，有两个边，一个顶部和一个底部。我可以做剩下的事，只是想不出这个盒子。我不能不看你的代码。请阅读，如果您仍然有问题，请发布您的代码。感谢您的回复。我只是按照那个教程做了所有的事情，在修正透视图之前。它显示了一个例子，你可以看到中间正方形的外面，但我只看到正方形。我将发布我所拥有的。。。再次谢谢你

 *{box-sizing:border-box;padding:0;margin:0}

:root{
    background: #ececee;
    width: 100vw;
    height: 100vh;
    position: relative
}

.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}

#bookshelf{
    width: 720px;
    height: 940px;
    margin: 20px auto;
    box-shadow: inset 0 -240px #bbbbbb
}

.scene{
    width:100%;
    display:bock;
    clear:both;
    position:relative
}

.cube{
    position:relative;
    display: inline-block;
    width: 32.6%;
    height: 150px;
    border: 4px solid #f1f3f2
}
.scene:nth-child(even) .cube{
    width: 30.9%;
    margin: 0 1%;
}

.scene:last-child .cube{
    box-shadow: inset 0 0 64px #BABABA;
    background: whitesmoke;
}
.scene:last-child .cube:first-child{
    border-bottom: 20px solid #E0E0E0;
    border-left: 20px solid #F0F0F0;
}
.scene:last-child .cube:last-child{
    border-bottom: 20px solid #E0E0E0;
    border-right: 20px solid #F0F0F0;
}

.cube:before,.cube:after{
    content:'';
    position:absolute;
}

.scene:last-child .cube:first-child:after{
    content: '';
    position: absolute;
    top: -24px;
    left: 0px;
    height: 20px;
    width: 106px;
    background: #f1f3f2;
    }
.scene:last-child .cube:first-child:before{
    content:'';
    position:absolute;
    top:-24px;
    left:-20px;
    height:0;
    width:0;
    border-right: 22px solid #f1f3f2;
    border-top: 20px solid transparent;
    border-bottom: 0px solid transparent; 
    }   
.scene:last-child .cube:last-child:before{
    content: '';
    position: absolute;
    top: -24px;
    right: 0px;
    height: 20px;
    width: 106px;
    background: #f1f3f2;
    }
.scene:last-child .cube:last-child:after{
    content:'';
    position:absolute;
    top:-24px;
    right:-20px;
    height:0;
    width:0;
    border-left: 22px solid #f1f3f2;
    border-top: 20px solid transparent;
    border-bottom: 0px solid transparent; 
    }

.scene:last-child .cube:nth-child(2){
    box-shadow: inset 0 0 64px #BABABA,inset 0 -18px #E0E0E0
}