%a.hoverme
  Hover Here
.container
  .cube
    .half1
      .side.s1
      .side.s2
      .side.s5
    .half2
      .side.s3
      .side.s4
      .side.s6
View Compiled
@import "bourbon";

$bg: #0b2331;
$line: #fff;
$perspective: 40000;

body {
  background-color: $bg;
  font-family: Helvetica, sans-serif;
}
.cube,.half1,.half2,.container,.side {
  @include transform-style( preserve-3d );
}
.container {
  position: relative;
  width: 800px;
  height: 800px;
  margin: 0 auto;
  z-index: -999;
  text-align: center;
  @include perspective( $perspective + px );
}
.hoverme {
  display: inline-block;
  background: #ccc;
  padding: 20px;
  font-size: 1em;
  cursor: pointer;
  opacity: 0.9;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  @include transition ( all 10ms ease-in-out );
  &:hover {
    opacity: 1;
    ~ .container .cube {
      .side {
        &:after {
          @include transform( translate3d(-50%,-50%,0) rotate(45deg) );
        }
        &:before {
          @include transform( translate3d(-50%,-50%,0) rotate(45deg) );
        }
      }
    }
  }
}
.cube {
  margin-top: -100px;
  width: 800px;
  height: 800px;
  @include transform( rotateX(185deg) rotateY(0deg) rotateZ(45deg) ); 
  @include transform-origin( center );
  @include animation( cube 5.0s forwards infinite );
  @include animation-timing-function( cubic-bezier(.97,1,.66,.9) );
}
.half1 {
  height: 320px;
  top: 0;
  position: absolute;
  @include transform( rotateX(-90deg) );
  @include transform-origin( 50% 100% );
}
.side {
  width: 160px;
  height: 160px;
  border: 1px solid $line;
  background: transparent;
  position: absolute;
  overflow: hidden;
  @include box-sizing( border-box );
  &:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 400px;
    background: $line;
    left: 50%;
    top: 50%;
    @include transform( translate3d(-50%,-50%,0) );
    @include transform-origin( center center );
    @include transition ( all 400ms ease-in-out );
  }
  &:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 400px;
    background: $line;
    left: 50%;
    top: 50%;
    @include transform( translate3d(-50%,-50%,0) );
    @include transform-origin( center center );
    @include transition ( all 400ms ease-in-out );
  }
}
.s1 {
  top:0;
  left: 320px;
  @include transform-origin( 50% 100% );
  @include transform( rotateX(-90deg) );
}
.s2 {
  top: 160px;
  left: 320px;
  @include transform-origin( 50% 0% );
}
.s3 {
  top: 320px;
  left: 320px;
  @include transform-origin( 50% 0% );
}
.s4 {
  top: 480px;
  left: 320px;
  @include transform-origin( 50% 0% );
  @include transform( rotateX(90deg) );
}
.s5 {
  left:160px;
  top: 160px;
  @include transform-origin( 100% 50% );
  @include transform( rotateY(90deg) );
}
.s6 {
  left:480px;
  top: 320px;
  @include transform-origin( 0% 50% );
  @include transform( rotateY(-90deg) );
}
@include keyframes( cube ) {
  0% {
    @include transform( rotateX(55deg) rotateY(0deg) rotateZ(45deg) ); 
  }
  12.5% {
    @include transform( rotateX(55deg) rotateY(0deg) rotateZ(45deg) );
  }
  25% {
    @include transform( rotateX(55deg) rotateY(0deg) rotateZ(135deg) );
  }
  37.5% {
    @include transform( rotateX(55deg) rotateY(0deg) rotateZ(135deg) );
  }
  50% {
    @include transform( rotateX(125deg) rotateY(0deg) rotateZ(135deg) ); 
  }
  62.5% {
    @include transform( rotateX(125deg) rotateY(0deg) rotateZ(135deg) ); 
  }
  75% {
    @include transform( rotateX(125deg) rotateY(0deg) rotateZ(45deg) );
  }
  87.5% {
    @include transform( rotateX(125deg) rotateY(0deg) rotateZ(45deg)  );
  }
  100% {
    @include transform( rotateX(55deg) rotateY(0deg) rotateZ(45deg) );
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.