A Pen by Jonathan Hudak.

CSS-only-spinning-cubes.markdown

CSS only spinning cubes

Try the hover effect!

Forked from Mircea Georgescu's Pen CSS only spinning cubes.

A Pen by Jonathan Hudak on CodePen.

License.

index.jade

.wrapper
  - for (var x = 1; x < 4; x++)
    .cube.parent
      b.front
      b.face.back
      b.face.top
      b.face.bottom
      b.face.left
      b.face.right
      - for (var j = 1; j < 4; j++)
        .cube.child
          b.front
          b.face.back
          b.face.top
          b.face.bottom
          b.face.left
          b.face.right
       

style.scss

@keyframes spin {
  100%  { 
    transform: rotateX(720deg);
    background: white;
  }
}

html, body {
  height: 100%;
  background: black;
}


/* scene wrapper */
.wrapper{
  height: 100%;
  position:relative;
  perspective: 20px;
  top: 10%;
  
  
}

/* cube wrapper */
.cube{
  position: relative;
  margin: auto;
  width: 50%;
  height: 50%;
  transform-style: preserve-3d;
  animation: spin 20s infinite linear;
  animation-direction: forward;
  transition: all 1s linear;
  transform: translateX(-50%);
  @for $i from 1 through 15 {
  	&:nth-of-type(#{$i})  {
  	  opacity: 0.1#{$i};
  	}
  
}	
  
  
}


 @for $i from 1 through 15 {
  	.cube.parent:nth-of-type(#{$i})  {
  	  transform: rotateY(50deg);
  
  	}
}

/* outer cube */
b{
  position:absolute;
  width:200px;
  height:200px;
  display:block;
  background:rgba(255,255,255,0.1);
  box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
  font-size:20px;
  text-align:center;
  line-height:200px;
  color:rgba(0,0,0,0.5);
  font-family:sans-serif;
  text-transform:uppercase;
  transition: all 1s linear;
}
b.back{
  transform: translateZ(-100px) rotateY(180deg);
}
b.right{
  transform:rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
b.left{
  transform:rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}
b.top{
  transform:rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
b.bottom{
  transform:rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
}
b.front{
  transform: translateZ(100px);
}

/* inner cube */
i{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  display:block;
  background:url(http://i45.tinypic.com/muxvt1.png);
  transition: all 1s linear;
}
i.front{
  transform: translateZ(50px);
}
i.back{
  transform: translateZ(-50px) rotateY(180deg);
}
i.bottom{
  transform:rotateX(-90deg) translateY(50px);
  transform-origin: left bottom;
}
i.left{
  transform:rotateY(270deg) translateX(-50px);
  transform-origin: center left;
}
i.right{
  transform:rotateY(-270deg) translateX(50px);
  transform-origin: top right;
}
i.top{
  transform:rotateX(-270deg) translate(-40px 70%);
  transform-origin: left top;
}

.face {
  /* background: url(http://shabazz.builtbycivilization.com/3/assets/images/full-script.svg); */
  border: 1px solid white;
}