创建一个立方体书架

我一直在寻找一段时间，并尝试了一些不起作用的东西，但我想创建一个使用CSS的书架的静止立方体。任何人都有一些关于如何做到这一点的指针？我已经包含了我想要创建的图片。创建一个立方体书架

感谢

enter image description here

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

来源

2014-10-28 Sheri Trager

你尝试过这么远吗？一个好的起点是一些3d css立方体的谷歌，并应用边界，内部阴影和外部阴影。但是，这不会是浏览器不可知论的，尽管它应该在大多数现代浏览器中工作 – 2014-10-28 16:50:21

我一直在尝试使用一个多维数据集，但无法像框中那样排列起来。基本上我是一个有两面，顶部和底部的正方形。我可以做的其余的只是无法弄清楚盒子。 – 2014-10-28 17:01:21

我无法看到你的代码。阅读[本文]（http://css-tricks.com/creating-a-3d-cube-image-gallery/），如果您仍然有问题，请发布您的代码。 – 2014-10-28 17:03:55

尝试这样的事：

DEMO

enter image description here

标记：

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

来源

2014-11-11 10:14:46

复制的文章SCSS，取而代之的是将设定宽度的变量。还有很多更SCSS不是变量，其中一个是数学：

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

此行是无效的CSS，你不能做师在CSS没有calc()功能。甚至不适用于所有风格。

将其更改为：

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

这里是一个工作fiddle

来源

2014-10-29 10:34:48

创建一个立方体书架

回答

相关问题