A Pen by Ben Newton.

CSS-only-spinning-cubes.markdown

CSS only spinning cubes

Fork of Spinning Cubes with new animation and effects.

A Pen by Ben Newton on CodePen.

License.

index.html

<div class="wrapper">
  <div class="cube">
    <b class="front"></b>
    <b class="back">$299</b>
    
    <b class="left"></b>
    <b class="right"></b>
    
    <div class="inner-wrapper">
      <i class="front"></i>
      <i class="back"></i>
      <i class="top"></i>
      <i class="bottom"></i>
      <i class="left"></i>
      <i class="right"></i>
    </div>
    
  </div>
</div>
<div class="wrapper">
  <div class="cube">
    <b class="front"></b>
    <b class="back">$299</b>
    
    <b class="left"></b>
    <b class="right"></b>
    
    <div class="inner-wrapper">
      <i class="front"></i>
      <i class="back"></i>
      <i class="top"></i>
      <i class="bottom"></i>
      <i class="left"></i>
      <i class="right"></i>
    </div>
    
  </div>
</div>

style.css

.wrapper{
  margin-left:28px;
  float:left;
  height: 300px;
  margin-top:50px;
  position:relative;
  perspective: 800;
  perspective-origin: 50% 100px;
}
.inner-wrapper {
  position: relative;
  margin: 0 auto;
  width: 200px;
  transform-style: preserve-3d;
  transition: all .5s linear;
  transition-delay: .5s;
}
/* cube wrapper */
.cube{
  position: relative;
  margin: 0 auto;
  width: 200px;
  transform-style: preserve-3d;
  transition: all .5s linear;
}

/* 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);
  color:rgba(255,255,255,1);
  
}
b.right{
  transform:rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}
b.left{
  transform:rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}


b.front{
  transition: all .0s linear;
  transition-delay:.25s;
  transform: translateZ(100px);
  background:url(http://i42.tinypic.com/2j2iw6v.jpg);
}

/* inner cube */
i{
  position:absolute;
  top:50px;
  left:50px;
  width:100px;
  height:100px;
  display:block;
  background-color:#ec008c;
  box-shadow:inset 0 0 30px rgba(0,0,0,0.3);
  
  
  //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) translateY(-50px);
  transform-origin: left top;
}

/* hover transformations */
.cube:hover{
  //top:150px;
  transform: rotateY(180deg); 
  z-index:-1;
}
.cube:hover .inner-wrapper {
  transform: rotateY(180deg); 
}
.cube:hover b.front {
  opacity:.8; 
  filter: blur(2px); 
  -webkit-filter: blur(2px); 
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: url(#blur);
}
.cube:hover b.top{
  //transform: translateZ(100px) rotateX(-210deg);
 // transform-origin: top center;
}
.cube:hover i{
 // top:-200px;
}