How to create cube with only HTML and CSS?

Question

I have this and I want to make a cube with HTML & CSS only like in the above image. My best try:

Answer 1

I seen this and thought I would add something I came up with while trying to make some old fashioned abc blocks. Making them into 3d I only had to label the main container with another class to change positions and saved on the code. I commented the tutorial in the code. Hope this helps someone. :)

          
/*-------------------------------------------------------------   
First we need to create our container for later reference
    -I put this to show in the center of the screen if you wanted to 
    copy and paste the code into a document for play. 
    -The width is just to give the margin auto something to center on. 
    -You really on need the element itself to reference later, but this is prettier
-------------------------------------------------------------*/
.box{
    width: 100px;
    margin: 200px auto;
    text-align: center;
    line-height: 5;
}

/*---------------------------------------------------------------------------
The box-wrapper is our real hero container here. This is where we nail our box together. 
    -set this to relative position for child elements to reference to.
    -transform-style is set to preserve-3d because I wanted to keep the look as the text turns with the box. You can also set this to flat, but its not near as cool. 
---------------------------------------------------------------------------*/


.box-wrapper{
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;    
}
/*-------------------------------------------------------------------------
Here I am just giving the box its needed dimesions and setting them to absolute so nothing gets any ideas of wandering off.
    -PLEASE NOTE: the border has 2px and our w:98 h:98 making it a total of 100px. (this is important when we translate later)
-------------------------------------------------------------------------*/
.box-wrapper div{
    width: 98px;
    height: 98px;
    position: absolute;    
    border: 2px solid black;
    border-radius: 5px;
}

/*----------------------------------------------------------------------
Since our sides are 100px we only need to move our box sides 50px to get the edges to match up without gaps.
    -Meaning "translate" moves to the position relative to your .box-wrapper. (You can play with this code to see it in action, try to take a visible section of the box and take it down 10). 
    -Also I use "rotate" y and x to turn our box sheets (.box-wrapper div's)
-----------------------------------------------------------------------*/
.front{
    transform: translateZ(50px) rotateY(0deg);
}
.back{
    transform: translateZ(-50px) rotateY(180deg);
}
.top{
    transform: translateY(-50px) rotateX(90deg);
}
.bottom{
    transform: translateY(50px) rotateX(-90deg);
}

.right{
    transform: translateX(50px) rotateY(90deg);
}
.left{
    transform: translateX(-50px) rotateY(270deg);
}

/*-----------------------------------------------------------------------
Then after all of this we can use our cool box-wrapper to turn this baby
Hope this is helpful! :) Enjoy!
-------------------------------------------------------------------------*/

.box .box-wrapper{
    transform: rotateX(-30deg) rotateY(-40deg);
}
.box .box-wrapper div{
    background-color: yellow;
}

    
        
        
        
        
    
    

           


                    


                        
Front
                        
Back
                        
Left
                        
Right
                        
Top
                        
Bottom