Single Element 3D Cube

By: McSwindler

The other day I saw some post about cubes in HTML/CSS using 3 different elements inside a container element. I then got to thinking: what if I did that with just a single element and all CSS? I then started messing around and eventually came out with the following. Fair warning: it only works properly in Firefox 4.0+

Here is a big cube, it is green. The cool thing about it is it uses CSS3 calc(), the bad thing is only Firefox supports it :(
If you are looking at this in Google, Safari, or (heaven-forbid) Internet Explorer; then you should hop over to Firefox and then look at it, I guarantee it will look cooler.

This cube is in front! but, it sits inside the big cube div.

I had a lot of difficulty getting a fluid height/width for the main element and having that same height/width for the bordering sides. With the transforming, the the sides kept on coming out longer. The only way I could figure out to get the dimensions fluid was to use the CSS calc() to calculate the width/height of the sides. I ended up with this formula .71*100% + .554px. Technically my calculator came up with several more decimal places, but this works just as well.

The cubes above are fixed width, yet fluid height. They can easily be adjusted to fluid width as well, I just didn’t want a super wide cube.

Here is the basic CSS, it uses one element and the :before and :after pseudo elements. The HTML is as simple as adding the class cube to an element such as a div or p.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.cube {
    display: inline-block;
    width: 250px;
    background: hsl(120,100%, 50%);
    position: relative;
    margin: 30px 0 0 30px;
    padding: 15px;
    border: 1px hsl(120, 100%, 50%) solid;
}
.cube:before {
    content: ' ';
    background: hsl(120,100%, 25%);
    top: -36px;
    left: -36px;
    height: -moz-calc(.71*100% + .554px);
    width: 50px;
    -moz-transform: rotate(45deg) skew(45deg, 0deg);
    position: absolute;
    -moz-transform-origin: top left;
    display: inline-block;
}
.cube:after {
    content: ' ';
    background: hsl(120,100%, 75%);
    top: -36px;
    left: -36px;
    height: 50px;
    width: -moz-calc(.71*100% + .554px);
    -moz-transform: rotate(-45deg) skew(0deg, 45deg);
    position: absolute;
    -moz-transform-origin: top left;
}

You can change the sizes as you please, however, if you change the sizes of the siding you will have to change the positioning as well.

One Response to Single Element 3D Cube

  1. FlamesoFF says:

    Here it in Chrome: :)

    HTML:

    Here is a big cube, it is green. The cool thing about it is it uses CSS3 calc(), the bad thing is only Firefox supports it
    If you are looking at this in Google, Safari, or (heaven-forbid) Internet Explorer; then you should hop over to Firefox and then look at it, I guarantee it will look cooler.

    This cube is in front! but, it sits inside the big cube div.

    CSS:

    .cube:before {
    content: ‘ ‘;
    background: hsl(120,100%, 25%);
    top: -36px;
    left: -36px;
    height: -moz-calc(.71*100% + .554px);
    width: 50px;
    position: absolute;
    display: inline-block;
    -webkit-transform: rotate(45deg) skew(45deg, 0deg);
    -webkit-transform-origin: top left;
    height: calc(.71*100% + .554px);
    }

    .cube:after {
    content: ‘ ‘;
    background: hsl(120,100%, 75%);
    top: -36px;
    left: -36px;
    height: 50px;
    position: absolute;
    width: calc(.71*100% + .554px);
    -webkit-transform: rotate(-45deg) skew(0deg, 45deg);
    -webkit-transform-origin: top left;
    }

Leave a Reply to FlamesoFF Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
Δ
Back to Top