design and construct a three-dimensional shelving unit

After much searching and failed attempts, I am determined to create a stationary cube-shaped bookcase using CSS. Can anyone offer some guidance on how I can achieve this? I have included an image of the design I want to replicate.

Thank you

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

Answer №1

Consider attempting something along these lines:

VIEW DEMO

Here is the markup code:

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

And here is the corresponding style code:

*{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:block;
    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 revised the SCSS articles by substituting the variables with a fixed width. However, it's worth noting that SCSS offers more than just variables - for instance, mathematical operations:

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

This particular line of code is considered invalid in CSS because division is not directly supported without using the calc() function, which may not be compatible with all styles.

To make it valid, adjust it to:

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

For a functional demonstration, you can access this fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Link to database stored in MySQL and HTML within a URL reference

I am currently working on creating an image link that allows users to define a folder in their settings. Below is the code I am using: <?php if (strpos($current_user_meta['UserRank'], 'Admiral ') !== false ) { // get the use ...

phphtmlmysqlimage

Having trouble targeting a div with jQuery

Is it possible to target a specific div within an unordered list and list items? I'm having trouble with it. Here is the HTML code: <ul class="grid"> <div id='categoria' cat='web'></div> <li id=' ...

javascriptjqueryhtml

Move the footer to the bottom of the content

I'm struggling to position my footer directly after the last div on my page, as it's appearing lower than I'd like. Can anyone assist with this issue? Here is the code snippet: <div id="container"> <div id="header"> ...

htmlcssfooter

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

javascriptjqueryhtmlimage

Tips for achieving vertically centralized components with uniform height columns in Bootstrap 4

I tried implementing the solution provided in this question: Bootstrap 4 vertical center - equal height cards However, I am still facing an issue. Despite applying the suggested code: <div class="cycle-des h-100 justify-content-center">Product Cycl ...

cssbootstrap-4

Personalizing Google Map pin

I found some code on Codepen to add pointers to a Google map. Currently, it's using default markers but I want to change them to my own. However, I'm not sure where in the code to make this update. Any examples or guidance would be appreciated. ...

javascriptcssgoogle-maps

The select tag is malfunctioning in the Firefox browser upon clicking with the mouse

One of the select tags in my application is causing issues in Firefox browser. Although all other select tags in different pages work fine, this particular page seems to be problematic. When attempting to change the option in the select tag, it fails to r ...

htmlfirefoxtwitter-bootstrap-3mouseangularjs-1.2

Enabling a checkbox grid for exclusive rectangular selections

Apologies for the confusing title, I struggled to come up with something more fitting. Let's say my client needs a square area on their homepage where they can upload images that will be placed within various boxes in a grid. The available box optio ...

javascripthtmlmath

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Add a CSS class to a dropdown menu option in HTML and JavaScript (JQuery) if it has a specified ID

I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...

javascriptjqueryhtmlcss

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

I'm currently developing an app using next js and redux. An interesting issue has arisen - when I include PersistGate in my _app.js file, the flex direction mysteriously changes from row to column in index.js. There haven't been any modifications ...

javascriptcssreduxflexboxnext.js

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

Switching the visibility of multiple textareas from block to none

I am currently exploring ways to make one text area disappear while another one appears in its place. With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the rig ...

javascripthtmlcss

Showing Variables in JavaScript

<!DOCTYPE HTML> <html> <body> <button onclick="question++">Increment</button> <script> function test() { var question = 0; } </script> </body> </html> Qu ...

javascripthtmlwebincrement

Steps for designing a complete background picture

Seeking to enhance my CSS skills, I've been faced with a challenging task recently. The objective is to create a full-screen background image with centered text overlay. However, the image appears larger than the screen itself. This is my current se ...

cssreactjs

What is the best way to style only textboxes with CSS without affecting other input types such as checkboxes?

If attribute selectors were universally supported by all browsers, we could effortlessly implement the following styling: input[type='text'] { font:bold 0.8em 'courier new',courier,monospace; } input[type='radio'] { margin:0 ...

asp.netcss

Perform a search within an iframe

Despite the fact that iframes are considered outdated, I am attempting to create a browser within an HTML browser. I have implemented a search bar that opens the typed input in a new window which searches Google. However, I would like to modify it so that ...

javascripthtmlgoogle-chromesearchbrowser

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Looking for help with integrating HTML/CSS code into React/Bootstrap? I need assistance with coding in React using Bootstrap. How do I effectively use components and props? Even after installing bootstrap, I am encountering errors. Is it possible to dire ...

javascripthtmlreactjsbootstrap-5

What is the best way to send variables through an HTTP post from a JavaScript function in one file to a separate Python function in a different location?

I have a JavaScript script that retrieves user inputs from my HTML session storage and sends them to a database. Additionally, I need to send a HTTP request to pass a JSON object containing the entries to a Python file hosted elsewhere. Can anyone suggest ...

pythonhtmljsonnode.jsfirebase-realtime-database

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

javascripthtmlreactjs