创建一个立方体书柜

Question

我已经搜索了一段时间，并尝试了一些不起作用的东西，但我想用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>

Answer 1

您复制了文章SCSS并用设置的宽度替换了变量。 SCSS还有很多变量，其中一个是数学：

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

这一行是无效的CSS，你不能在没有calc()功能的情况下在css中进行除法。甚至那并不适用于所有风格。

将其更改为：

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

这是一个有效的fiddle

Answer 2

尝试这样的事情：

DEMO

标记：

<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>

风格：

 *{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
}