create a cubed bookcase - html

Question

I've been searching for a while and have tried a few things that didn't work, but I would like to create a stationary cube looking bookcase using css.
Anyone have some pointers on how I can do this?
I have included a picture of what I want to create.
Thanks
.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

try something like this :
DEMO
Markup:
<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>
Style:
*{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
}

Answer 2

You copied the articles SCSS and replaced the variables with the set width. There is a lot more to SCSS than variables, one of which is maths:
transform: rotateY(180deg) translate3d(0, 0, 150px/2);
This line is invalid CSS, you can't do division in css without the calc() function. and even that doesn't work in all styles.
Change it to:
transform: rotateY(180deg) translate3d(0, 0, 75px);
Here is a working fiddle