A Pen by Mudassir.

index.jade

button.open open the box
button.reset reset
.viewport
  .cube.spin
    .face.front.top
    .face.front
      .r r
    .face.back.top
    .face.back
    .face.left.top
    .face.left
    .face.right.top
    .face.right
    .face.bottom
    
link(href='http://fonts.googleapis.com/css?family=Droid+Sans',rel='stylesheet', type='text/css')

Recruiterbox-Logo-in-CSS3.markdown

Recruiterbox Logo in CSS3

Recently learned how to create a 3D cube in CSS3....So, wanted to recreate Recruiterbox's(where I work) logo in HTML5 as a weekend fun project :)

http://recruitmentbuzz.co.uk/recruitment/wp-content/uploads/2014/05/Recruiterbox-logo-on-mevvy.com_.png

A Pen by Mudassir on CodePen.

License.

script.js

$( '.open' ).on( 'click', function () {
  $( '.cube' ).removeClass( 'spin' ).addClass( 'explode' );
} )

$( '.reset' ).on( 'click', function () {
  $( '.cube' ).removeClass( 'explode' ).addClass( 'spin' );
} )

style.less

/** Variables  **/
@cube-side-length: 400px;
@z-translate: @cube-side-length/2;
@top-length: 0.4*@cube-side-length;
@top-y-translate: -@top-length;
@top-angle: -45deg;
@initial-y-deg: -24deg;
@front-transform: translateZ(@z-translate);
@back-transform: rotateY(180deg) translateZ(@z-translate);
@left-transform: rotateY(-90deg) translateZ(@z-translate);
@right-transform: rotateY(90deg) translateZ(@z-translate);

/** KEYFRAMES  START **/

@-webkit-keyframes spin {
  0% {
    transform: rotateX(2deg) rotateY(-24deg);    
  }

  100% {
      transform: rotateX(2deg) rotateY(-384deg);
  }
}

@-webkit-keyframes flip {
  0% {
    transform: translateZ(@z-translate) translateY(@top-y-translate) rotateX(@top-angle);
  }
  
  100% {
    transform: translateZ(600px) translateY(240px) rotateX(-90deg);
  }
}

@-webkit-keyframes flip-front {
  0% {
    transform: @front-transform;
  }

  100% {
    transform: @front-transform rotateX(-90deg);
  }
}

@-webkit-keyframes flip-front-top {
  0% {
    transform: @front-transform;
  }

  100% {
    transform: @front-transform rotateX(-90deg);
  }
}

@-webkit-keyframes flip-back {
  0% {
    transform: @back-transform;
  }

  100% {
    transform: @back-transform rotateX(-90deg);
  }
}

@-webkit-keyframes flip-left {
  0% {
    transform: @left-transform;
  }

  100% {
    transform: @left-transform rotateX(-90deg);
  }
}

@-webkit-keyframes flip-right {
  0% {
    transform: @right-transform;
  }

  100% {
    transform: @right-transform rotateX(-90deg);
  }
}

@-webkit-keyframes flip-front-top {
  0% {
    transform: @front-transform translateY(@top-y-translate) rotateX(@top-angle);
  }
  
  100% {
    transform: translateZ(600px) translateY(240px) rotateX(-90deg);
  }
}

@-webkit-keyframes flip-back-top {
  0% {
    transform: @back-transform translateY(@top-y-translate) rotateX(@top-angle);
  }
  
  100% {
    transform: rotateY(180deg)   translateZ(600px) translateY(240px) rotateX(-90deg);
  }
}

@-webkit-keyframes flip-left-top {
  0% {
    transform: @left-transform translateY(@top-y-translate) rotateX(@top-angle);
  }
  
  100% {
    transform: rotateY(-90deg)   translateZ(600px) translateY(240px) rotateX(-90deg);
  }
}

@-webkit-keyframes flip-right-top {
  0% {
    transform: @right-transform translateY(@top-y-translate) rotateX(@top-angle);
  }
  
  100% {
    transform: rotateY(90deg)   translateZ(600px) translateY(240px) rotateX(-90deg);
  }
}


/** KEYFRAMES END **/

/** MIXINS START **/
.square(@units) {
  width: @units;
  height: @units;
}

.box-side (@side, @transform) {
  .@{side} {
    transform: @transform;
    
    &.top {
      transform: @transform translateY(@top-y-translate) rotateX(@top-angle);
    }
  }
}

.explode ( @side ) {
  .@{side} {

    -webkit-animation: "flip-@{side}" 0.5s linear;
          -webkit-animation-fill-mode: forwards;
    
    &.top {
      -webkit-animation: "flip-@{side}-top" 0.5s linear;
                  -webkit-animation-fill-mode: forwards;

    }
  }
}

/** MIXINS END **/

body {
  color: black;
  font-family: 'Droid Sans';
}

.viewport {
  perspective: 1000px;
  perspective-origin: 50% @cube-side-length/2;
  transform: scale(0.25, 0.25);
}

.cube {
  .square(@cube-side-length);
  position: relative;
  margin: @cube-side-length/2 auto;
  transform-style: preserve-3d;
  transform: rotateX(2deg) rotateY(-24deg);
  
  &.spin {
    -webkit-animation: spin 3s linear infinite;
  }

  &.explode {
    .explode(front);
    .explode(left);
    .explode(right);
    .explode(back); 
  }
}

.face {
  .square(@cube-side-length);
  transform-origin: bottom;
  box-sizing: border-box;
  border: 1.5px solid rgb(147, 112, 68);
  position: absolute;
  box-shadow: inset 1px 1px 200px rgb(147, 112, 68);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAADICAIAAADnSKNYAAAACXBIWXMAAOpTAADqYAEGJ6t1AAAAJHpUWHRDcmVhdG9yAAAImXNMyU9KVXBMK0ktUnBNS0tNLikGAEF6Bs5qehXFAAACLklEQVR4nO3SMQHAIADAsDHfCEISblDATY9EQY+OveYHSf/rALhyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U663EmXO+lyJ13upMuddLmTLnfS5U66DiEuA4+1Lg6AAAAAAElFTkSuQmCC);
}

.front {
  text-align: center;
  font-weight: bold;
  font-size: @cube-side-length/4*3;
  line-height: 1em;
}

.box-side(front, @front-transform);
.box-side(back,  @back-transform);
.box-side(left, @left-transform);
.box-side(right, @right-transform);

.bottom {
  transform: rotateX(-90deg) translateZ(@z-translate);
  transform-origin: initial;
}

.r {
  transform: scale(2, 1);
  margin-left: 20px;
  margin-top: 12px;
}

.top {
  height: @top-length;
  transform-origin: bottom;
}