Cube rotates when a trigger has been activated. Using CSS transforms, CSS 3D and CSS animation.

index.html

<h1 class="title">Rotating <span>Cube</span></h1>
<section>
    <div class="cube-container">
        <div class="cube">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
        </div>
    </div>

    <div href="" class="cube-switch">
        <span class="switch">
            <span class="switch-state off">Off</span>
            <span class="switch-state on">On</span>
        </span>
    </div>
</section>

script.js

if(Modernizr.csstransforms3d) {
  $('.cube-switch .switch').click(function(){
    if($('.cube').hasClass('spin') && $('.cube-switch').hasClass('active')){
      $('.cube-switch').removeClass('active');
      $('.cube').removeClass('spin');
    } else {
      $('.cube-switch').addClass('active');
      $('.cube').addClass('spin');
    }
  });
}

style.scss

@import "compass";
// = GLobals
//-------------------------------------------------------------------------------//

body {
  background: red;
}

.title {
  position: relative;
  top: 3em;

  color: white;

  text-align: center;
  text-transform: uppercase;

  span {
    display: block;

    font-size: 1.85em;
    line-height: .75em;
    text-outline: black;
  }
}


// = Keyframes
//-------------------------------------------------------------------------------//

@-webkit-keyframes spin {
    from { @include transform(rotateX(0) rotateY(0)) }
    to   { @include transform(rotateX(360deg) rotateY(360deg)); }
}

@-moz-keyframes spin {
    from { @include transform(rotateX(0) rotateY(0)); }
    to   { @include transform(rotateX(360deg) rotateY(360deg)); }
}

@-ms-keyframes spin {
    from { @include transform(rotateX(0) rotateY(0)); }
    to   { @include transform(rotateX(360deg) rotateY(360deg)); }
}

@-o-keyframes spin {
    from { @include transform(rotateX(0) rotateY(0)); }
    to   { @include transform(rotateX(360deg) rotateY(360deg)); }
}

@keyframes spin {
    from { @include transform(rotateX(0) rotateY(0)); }
    to   { @include transform(rotateX(360deg) rotateY(360deg)); }
}

.spin { 
    -webkit-animation: spin 5s infinite linear;
    -moz-animation: spin 5s infinite linear;
    -ms-animation: spin 5s infinite linear;
    -o-animation: spin 5s infinite linear; 
    animation: spin 5s infinite linear; 
}


// = Reflection
//-------------------------------------------------------------------------------//

.reflections {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.6)));
}


// = Cube Module
//-------------------------------------------------------------------------------//
// IE9 and below doens't support 
// cssransforms3d but does support csstransforms

.csstransforms3d {

    // =======BEGIN CUBE CONTAINER ======= //

    .cube-container {
        height: 200px;

        margin: 0 auto;
        position: relative;
        top: 10em;
        width: 200px;
        // distance between the scene and the viewer
        -moz-perspective:600px;
        @include perspective(600px);
        // vanishing point of perspective default is in middle of the scene
        -moz-perspective-origin: 50% 50%;
        @include perspective-origin(50% 50%);
    }

    // =======BEGIN CUBE ======= //

    .cube {
        height: 100%;
        position: absolute;
        @include transition($transition-1: .5s all ease-in-out);

        // preserve 3fd effect of child elements
        // default value is 'flat'
        // preserve effects of child elements
        -moz-transform-style: preserve-3d;
        @include transform-style(preserve-3d);

        /* panels global styles*/
        @include transform(rotateX(-20deg) rotateY(28deg));

        // tells browser not to render the back of the element
        // Accepts visible | hidden
        backface-visibility: visible;

        width: 100%;
          &:hover {
            cursor: pointer;
            // panels global hover styles
            @include transform(rotateX(-50deg) rotateY(0deg));
          }

        figure {
          @include box-sizing(border-box);
          display: block;
          height: 200px;
          position: absolute;
          width: 200px;

          font-size: 2em;
          line-height: 6em;
          text-align: center;
        }
    }

    // =======BEGIN CUBE PANELS======= //

    .cube .front { 
        background: rgba(230,0,0,.5);
        @extend .reflections;
        @include transform(translateZ(100px));
    }
    .cube .back { 
        background: rgba(200,0,0,.6);
        @extend .reflections;
        @include transform(rotateY(180deg) rotateX(0deg) translateZ(100px));
    }
    .cube .left { 
        background: rgba(200,0,0,.5);
        @extend .reflections;
        @include transform(rotateY(-90deg) translateZ(100px));
    }
    .cube .right { 
        background: rgba(200,0,0,.4);
        @extend .reflections;
        @include transform(rotateY(90deg) translateZ(100px));
    }
    .cube .top { 
        background: rgba(200,0,0,.3);
        @include transform(rotateX(90deg) translateZ(100px));
    }
    .cube .bottom {
        background: rgba(50,50,50,.5);
        @include transform(rotateX(-90deg) rotateZ(-180deg) translateZ(100px));
        opacity: .55;
    }
}


// = Cube Switch
//-------------------------------------------------------------------------------//

.cube-switch {
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.4);
    box-shadow: 0 0 8px rgba(0,0,0,0.6), inset 0 100px 50px rgba(255,255,255,0.1);
    /* Prevents clics on the back */
    cursor:default;    
    display: block;
    height: 100px;
    position: relative;
    left: -260px;
    margin: 0 auto;
    overflow:hidden;
    /* Prevents clics on the back */
    pointer-events:none;
    width: 100px;
    white-space: nowrap;

    background:#333;
}

/* The switch */
.cube-switch .switch {
    border:1px solid rgba(0,0,0,0.6);
    border-radius:0.7em;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -7px 0 rgba(0,0,0,0.2),
    inset 0 50px 10px rgba(0,0,0,0.2),
    0 1px 0 rgba(255,255,255,0.2);
    display:block;
    width: 60px;
    height: 60px;
    margin-left:-30px;
    margin-top:-30px;
    position:absolute;
    top: 50%;
    left: 50%;
    width: 60px;
 
    background:#666;
    transition: all 0.2s ease-out;

    /* Allows click */
    cursor:pointer;
    pointer-events:auto;
}

/* SWITCH Active State */
.cube-switch.active {
    background:#222;
    box-shadow:
    0 0 5px rgba(0,0,0,0.5),
    inset 0 50px 50px rgba(55,55,55,0.1);
}

.cube-switch.active .switch {
    background:#333;
    box-shadow:
    inset 0 6px 0 rgba(255,255,255,0.1),
    inset 0 7px 0 rgba(0,0,0,0.2),
    inset 0 -50px 10px rgba(0,0,0,0.1),
    0 1px 0 rgba(205,205,205,0.1);
}

.cube-switch.active:after,
.cube-switch.active:before {
    background:#333; 
    box-shadow:
    0 1px 0 rgba(255,255,255,0.1),
    inset 1px 2px 1px rgba(0,0,0,0.5),
    inset 3px 6px 2px rgba(200,200,200,0.1),
    inset -1px -2px 1px rgba(0,0,0,0.3);
}

.cube-switch.active .switch:after,
.cube-switch.active .switch:before {
    background:#222;
    border:none;
    margin-top:0;
    height:1px;
}

.cube-switch .switch-state {
    display: block;
    position: absolute;
    left: 40%;
    color: #FFF;

    font-size: .5em;
    text-align: center;
}

/* SWITCH On State */
.cube-switch .switch-state.on {
    bottom: 15%;
}

/* SWITCH Off State */
.cube-switch .switch-state.off {
    top: 15%;
}