generic ISOCUBE

Zachary Johnson and Paul Hayes showed some really nice examples of the CSS 2D transformation capabilites (isocube, 3D isocube using 2D CSS).

What I missed was the math behind it. Both (and every other isocube I could find on the net) statically positioned the three rectangles that form the isocube.

So what I did was to implement a generic isocube that renders based on the dimensions w, h and a degree α. The sources can be downloaded as a jQuery Plugin.

The math is mainly based on the Pythagorean theorem. In order to geometrically verify some hypotheses that came up I used Cinderella.


Different Angles

Example 1


Example 2



<div class="example1"></div>

<div class="example2">
  <a href="index.html">Homepage</a>

<div class="example3">
  <div class="right face">
    <a href="index.html">Homepage</a>

<div class="example4" data-alpha="30" data-shadow="true">
  <div class="left face">left face</div>
  <div class="right face">right face</div>
  <div class="top face">top face</div>


$(".example2").isocube({ alpha: 20 });
$(".example3").isocube({ shadow: true });


You can download the current release of isocube on

Important: You also have to install the jQuery Plugin jQuery 2d Transform as isocube uses it for cross browser support.


If you’re interested in the underlaying calculations, here you go.