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.

Examples

Different Angles

Interactivity

Usage

HTML

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

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

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

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

JS

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

Maths

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