Tachyon Cube Test

3d (slightly-) interactive object

HTML

<div id="experiment">
  <div id="tachyon-cube-hinge">
    <div id="tachyon-cube">
      <div id="cube-1" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
      <div id="cube-2" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
      <div id="cube-3" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
      <div id="cube-4" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
      <div id="cube-5" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
      <div id="cube-6" class="cube">
        <div class="face one blue"></div>
        <div class="face two lt-blue"></div>
        <div class="face three dk-blue"></div>
        <div class="face four dk-blue"></div>
        <div class="face five lt-blue"></div>
        <div class="face six blue"></div>
      </div>
     ...

CSS

* {
  margin: 0;
  padding: 0;
}

#experiment {
  position: relative;
  -webkit-perspective: 500;
  -webkit-perspective-origin: 50% 75%;
  top: 26px;
}

#tachyon-cube-hinge {
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 200px;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(-22.5deg) translateY(104px);
  /* animation overrides this */
  -webkit-animation: cube-spin 12s linear 0s infinite;
  -webkit-animation-play-state: paused;
}

.spinning {
  -webkit-animation-play-state: running !important;
}

/*
#tachyon-cube-hinge:hover {
	-webkit-animation: none;
}*/

#tachyon-cube {
  width: 40px;
  height: 40px;
  margin: auto auto;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(-30deg);
}

@-webkit-keyframes cube-spin
/* Safari and Chrome */

  {
  0% {
    -webkit-transform: rotateX(-22.5deg) rotateY(0deg) translateY(104px);
  }
  100% {
    -webkit-transform: rotateX(-22.5deg) rotateY(360deg) translateY(104px);
  }
}

.description {
  width: 90%;
  background-color: #ccc;
  margin: 2%;
  padding: 3%;
}

.description-wrapper {
  background-color: #eee;
  padding: 1% 0;
}

.cube {
  -webkit-transform-style: preserve-3d;
}

.reduced {
  opacity: 0.2;
}

.face {
  -webkit-backface-visibility: hidden;
  position: absolute;
  height: 40px;
  width: 40px;
  text-align: center;
  color: #fff;
}

.blue {
  background-color: #007EA3;
}

.lt-blue {
  background-color: #41BDE8;
}

.dk-blue {
  background-color: #003D58;
}

.green {
  background: -webkit-linear-gradient(top right, #262F00, #BED630);
}

.lt-green {
  background-color: #BED630;
}

.dk-green {
  background-color: #262F00;
}

.purple {
  background: -webkit-linear-gradient(top right, #601A3E, #BD6990);
}

.lt-purple {
  background-color: #BD6990;
}

.dk-purple {
  background-color: #601A3E;
}

.orange {
  background: -webkit-linear-gradient(top right, #EC1C24, #F6921E);
}

.lt-orange {
  background-color: #F6921E;
}

.dk-orange {
  background-color:...

JavaScript

function undimAll() {
  jQuery('.reduced').removeClass('reduced');
}

function highlight(color) {
  undimAll();
  jQuery('.face:not([class*=' + color + '])').addClass('reduced');
}

var is_spinning = false;

function toggle_spin() {
  if (!is_spinning) {
    jQuery('#tachyon-cube-hinge').addClass('spinning');
    is_spinning = true;
  } else {
    jQuery('#tachyon-cube-hinge').removeClass('spinning');
    is_spinning = false;
  }
}