Create a 3D block with CSS3

A lot of example already exist and 3D with CSS3 is nothing new. What i wanted to try here was to provide 3 different rendering modes of a cube without using any javascript, keeping the DOM untouched. Just plain CSS3.

So first, 3 modes: 2D, flat 3D (isometric view) & real 3D. Of course, real 3D only works with browsers that support preserve-3D css3 transform mode (only Safari, Mobile Safari & desktop Chrome atm).

<div id="box" mode="2d"></div>

<div id="box" mode="flat3d"></div>

<div id="box" mode="real3d"></div>

.

Without any DOM modification, my only option is using some not-well-known CSS3 selectors: ::before & ::after. See css3-3d-block or css3-3d-block-minecraft for demo / code.

Here is how it works for the flat3D, which you shoud be able to see properly on any modern web browser

#box[mode="flat3d"] {
top: 120px;
left: 50px;
width: 150px;
height: 150px;
-webkit-transform: translateY(50%) skewY(30deg) scaleY(1.1);
-moz-transform: translateY(50%) skewY(30deg) scaleY(1.1);
-o-transform: translateY(50%) skewY(30deg) scaleY(1.1);
}
#box[mode="flat3d"]::before {
content: "";
top: 0px;
left: 150px;
width: 150px;
height: 150px;
background-color: rgba(0,255,0,.4);
-webkit-transform: skewY(-50deg) translateX(0%) translateY(-60%);
-moz-transform: skewY(-50deg) translateX(0%) translateY(-60%);
-o-transform: skewY(-50deg) translateX(0%) translateY(-60%);
}
#box[mode="flat3d"]::after {
content: "";
top: 0px;
left: 150px;
width: 150px;
height: 150px;
background-color: rgba(0,0,255,.4);
-webkit-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
-moz-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
-o-transform: translateY(-109%) skewX(-40deg) translateX(-50%) scaleY(1.19);
}

Real 3D need some code on the parent element of the one in 3D. Here, it’s simply <body>

body {
-webkit-perspective: 1000px;
-moz-perspective: 75;
-o-perspective: 1000px;
-webkit-perspective-origin: 200px -150px;
-moz-perspective-origin: 200px -150px;
-o-perspective-origin: 200px -150px;
}

#box[mode="real3d"] {
top: 120px;
left: 70px;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateX(-20%) rotateY(-45deg);
-moz-transform: translateX(-20%) rotateY(-45deg);
-o-transform: translateX(-20%) rotateY(-45deg);
}
#box[mode="real3d"]::before {
content: "";
top: -100px;
width: 200px;
height: 200px;
background-color: rgba(0,0,255,.4);
-webkit-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-moz-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-o-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
}
#box[mode="real3d"]::after {
content: "";
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(0,255,0,.4);
-webkit-transform: rotateY(90deg) translateX(50%);
-moz-transform: rotateY(90deg) translateX(50%);
-o-transform: rotateY(90deg) translateX(50%);
}

4 thoughts on Create a 3D block with CSS3

  1. Interesting way with pseudo class… nice.
    But whatever the tricks, and whatever the shape by the way, cube, round, triangle, etc… it’s only visual and the DOM object is style square. If you want to add some interactivity on a ccs cube like a simple click event, the event will be fire with the DOM square object, meaning with the cube, but with the 4 corners outside the cube too. Real issue if you have 2 superposed cubes.
    So for a visual effect, it’s really cool but for more not really.
    I have searche a lot without finding a real solution. We have ‘canvas’ but it’s not really the same philosophy… we have SVG, but it’s really fastidious…

Leave a Reply