Quintessential Responsive 3D CSS Cube Examples

Here are examples for the Quintessential 3D CSS Cube GitHub project. These examples require a parent element with a perspective CSS property definition, such as the one set by the .qube-perspective class. The .qube class does the rest of the magic for you. Enjoy! —@zacharyjohnson

Translucent blue, 175x175x175px


<ul class="qube cube01">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube01 { width: 175px; height: 175px; }
.cube01 > * { background: rgba(0, 128, 255, 0.4); }

Brick texture, 120x120x120px


<ul class="qube cube02">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube02 { width: 120px; height: 120px; }
.cube02 > * { background-image: url(brick.png); }

Solid green with responsive sizing, and also shows .qube-preserve3d helper class


<div class="sq-25 qube-preserve3d">
  <ul class="qube cube03">
    <li class="front"></li>
    <li class="left"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="top"></li>
    <li class="bottom"></li>
  </ul>
</div>


.sq-25 {
  position: absolute;
  left: 0; right: 0; top: 0;
  margin: auto;
  width: 25%;
}

/* Enforce 1:1 aspect ratio */
.cube03 { width: 100%; padding-top: 100%; }
.cube03 > * { background: #0c0; }

Brick texture with shading disabled by .no-shading class


<ul class="qube no-shading cube04">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube04 { width: 120px; height: 120px; }
.cube04 > * { background-image: url(brick.png); }

Customize individual faces


<ul class="qube cube05">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube05 { width: 120px; height: 120px; }
.cube05 > * { background: #f0f; }

.cube05 > .front { background: #ff0; }
.cube05 > .right { background-image: url(brick.png); }

Customize shading


<ul class="qube cube06">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube06 { width: 120px; height: 120px; }
.cube06 > * { background-image: url(brick.png); }

.cube06 > .front:after { background: rgba(0,0,255,0.1); }
.cube06 > .back:after { background: rgba(0,0,255,0.6); }
.cube06 > .left:after { background: rgba(0,0,255,0.5); }
.cube06 > .right:after { background: rgba(0,0,255,0.3); }
.cube06 > .top:after { background: rgba(0,0,255,0.2); }
.cube06 > .bottom:after { background: rgba(0,0,255,0.7); }

Texture wrap cube with one image using .textured class


<ul class="qube textured cube07">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube07 { width: 150px; height: 150px; }
.cube07 > * { background-image: url(texture.png); }

Transparent with HTML content


<ul class="qube no-shading cube08">
  
  <li class="top">5</li>
  <li class="bottom">6</li>
  <li class="front">1</li>
  <li class="left">2</li>
  <li class="back">3</li>
  <li class="right">4</li>
</ul>


.cube08 { width: 150px; height: 150px; }
.cube08 > * { color: #000; background: transparent; }
/* Some CSS for HTML text not shown */

Remove individual faces


<ul class="qube textured cube09">
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube09 { width: 150px; height: 150px; }
.cube09 > * { background-image: url(texture.png); }

Automatic faces with .faces helper class


<ul class="qube faces no-shading cube10">
  
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>


.cube10 { width: 150px; height: 150px; }
.cube10 > * { color: #000; background: transparent; }
/* Some CSS for HTML text not shown */

Optimize opaque cubes with .solid class


<ul class="qube textured solid cube11">
  <li class="front"></li>
  <li class="left"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="top"></li>
  <li class="bottom"></li>
</ul>


.cube11 { width: 150px; height: 150px; }
.cube11 > * { background-image: url(texture.png); }

Transparency with .solid class


<ul class="qube no-shading solid cube12">
  <li class="front">1</li>
  <li class="left">2</li>
  <li class="back">3</li>
  <li class="right">4</li>
  <li class="top">5</li>
  <li class="bottom">6</li>
</ul>


.cube12 { width: 150px; height: 150px; }
.cube12 > * { color: #000; background: transparent; }
/* Some CSS for HTML text not shown */

Interactivity: Hover cube to spin around Y-axis


<ul class="qube cube13">
  <li class="front">1</li>
  <li class="left">2</li>
  <li class="back">3</li>
  <li class="right">4</li>
  <li class="top">5</li>
  <li class="bottom">6</li>
</ul>


.cube13 {
  width: 150px; height: 150px;
  transition: transform 1500ms ease;
}

.cube13:hover { transform: rotateY(359deg); }

.cube13 > * { color: #000; background: #ddc; }
/* Some CSS for HTML text not shown */

When spinning around the X-axis, use the .x-axis helper class to avoid upside down content


<ul class="qube x-axis cube14">
  <li class="front">1</li>
  <li class="bottom">2</li>
  <li class="back">3</li>
  <li class="top">4</li>
  <li class="left">5</li>
  <li class="right">6</li>
</ul>


.cube14 {
  width: 150px; height: 150px;
  transition: transform 1500ms ease;
}

.cube14:hover { transform: rotateX(359deg); }

.cube14 > * { color: #000; background: #ddc; }
/* Some CSS for HTML text not shown */