A CodePen by Łukasz Żak. Rubik's Cube in CSS3 - Rubik's Cube made in CSS3 and HTML with JavaScript code for rotation and animation.

index.html

<div id="main">
  <div class="lvl lvl1">
    
    <div class="row row1">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row2">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row3">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
  </div>
  
  
  <div class="lvl lvl2">
    
    <div class="row row1">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row2">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row3">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
  </div>
  
  <div class="lvl lvl3">
    
    <div class="row row1">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row2">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
    <div class="row row3">
      <div class="cube col col1">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col2">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
      <div class="cube col col3">
        <div></div><div></div><div></div><div></div><div></div><div></div>
      </div>
    </div>
    
  </div>
</div>

<div id="options">
  <label for="rotateX">Rotate X: <span class="deg">335 deg</span></label>
  <input type="range" min="0" max="360" value="335" step="5" id="rotateX"/>
  <label for="rotateY">Rotate Y: <span class="deg">335 deg</span></label>
  <input type="range" min="0" max="360" value="335" step="5" id="rotateY"/>
  <label for="rotateZ">Rotate Z: <span class="deg">0 deg</span></label>
  <input type="range" min="0" max="360" value="0" step="5" id="rotateZ"/>
  <hr />
  <input type="checkbox" id="makeAnimation" />
  <label for="makeAnimation">Enable animation</label>
</div>

script.js

(function() { 
  var rangeX = document.getElementById('rotateX');
  var rangeY = document.getElementById('rotateY');
  var rangeZ = document.getElementById('rotateZ');
  var animateCb = document.getElementById('makeAnimation');
  var mainDiv = document.getElementById('main');
  
  rangeX.addEventListener('change', function(){ rotateCube(); });
  rangeY.addEventListener('change', function(){ rotateCube(); });
  rangeZ.addEventListener('change', function(){ rotateCube(); });
  animateCb.addEventListener('change', function(){
    if(animateCb.checked)
      mainDiv.className += ' animate';
    else
      mainDiv.className = '';
  });
  
  function rotateCube(){
     mainDiv.style.webkitTransform = 
      'rotateX(' + rangeX.value + 'deg)' +
      'rotateY(' + rangeY.value + 'deg)' +
      'rotateZ(' + rangeZ.value + 'deg)';
    
    rangeX.parentNode.children[0].children[0].innerText = rangeX.value + ' deg';
    rangeY.parentNode.children[2].children[0].innerText = rangeY.value + ' deg';
    rangeZ.parentNode.children[4].children[0].innerText = rangeZ.value + ' deg';
  }
})();

style.css

body {
  background: #333;
}
#options {
  position: absolute;
  bottom: 20px;
  color: #fff;
  font-size: 150%;
  border: 1px dotted #ddd;
  padding: 5px;
}
#options input {
  display: block;
}
#options input#makeAnimation {
  display: inline;
}
#options label span {
  color: #ddd; font-weight: bold;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -moz-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -ms-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    -o-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
    transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  }
  to{
    -webkit-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -moz-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -ms-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    -o-transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
    transform: rotateX(695deg) rotateY(695deg) rotateZ(360deg);
  }
}

#main{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 150px;
  -webkit-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -moz-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -ms-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -o-transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  transform: rotateX(335deg) rotateY(335deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: transform 2s linear;
  -moz-transition: transform 2s linear;
  -ms-transition: transform 2s linear;
  -o-transition: transform 2s linear;
  transition: transform 2s linear;
}

#main.animate{
  -webkit-animation: spin 5s infinite linear;
  -o-animation: spin 5s infinite linear;
  animation: spin 5s infinite linear;
}
  
.cube{
  opacity: 1;
  position: absolute;
  height: 100px;
  width: 100px;
}

div.col, div.row, div.lvl{
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}


div.col2{
  -webkit-transform: translateX(100px);
  -moz-transform: translateX(100px);
  -ms-transform: translateX(100px);
  -o-transform: translateX(100px);
  transform: translateX(100px);
}

div.col3{
  -webkit-transform: translateX(200px);
  -moz-transform: translateX(200px);
  -ms-transform: translateX(200px);
  -o-transform: translateX(200px);
  transform: translateX(200px);
}

div.row1{
  -webkit-transform: translateZ(-150px);
  -moz-transform: translateZ(-150px);
  -ms-transform: translateZ(-150px);
  -o-transform: translateZ(-150px);
  transform: translateZ(-150px);
}
div.row2{
  -webkit-transform: translateZ(-50px);
  -moz-transform: translateZ(-50px);
  -ms-transform: translateZ(-50px);
  -o-transform: translateZ(-50px);
  transform: translateZ(-50px);
}
div.row3{
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  transform: translateZ(50px);
}


div.lvl2{
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
}
div.lvl3{
  -webkit-transform: translateY(200px);
  -moz-transform: translateY(200px);
  -ms-transform: translateY(200px);
  -o-transform: translateY(200px);
  transform: translateY(200px);
}


.cube div{
  position: absolute;
  height: 60px;
  width: 60px;
  padding: 18px;
  border: 3px solid #000;
  border-radius: 5px;
}

.cube div:nth-child(1){ /*front*/
  -webkit-transform: translateZ(50px);
  -moz-transform: translateZ(50px);
  -ms-transform: translateZ(50px);
  -o-transform: translateZ(50px);
  transform: translateZ(50px);
  background-color  : #fff;
}
      
.cube div:nth-child(2){ /*top*/
  -webkit-transform : rotateX(90deg) translateZ(50px);
  -moz-transform: rotateX(90deg) translateZ(50px);
  -ms-transform: rotateX(90deg) translateZ(50px);
  -o-transform: rotateX(90deg) translateZ(50px);
  transform: rotateX(90deg) translateZ(50px);
  background-color  : yellow;
}

.cube div:nth-child(3){/*bottom*/
  -webkit-transform : rotateX(-90deg) translateZ(50px);
  -moz-transform: rotateX(-90deg) translateZ(50px);
  -ms-transform: rotateX(-90deg) translateZ(50px);
  -o-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
  background-color  : orange;
}

.cube div:nth-child(4){ /*left*/
  -webkit-transform : rotateY(-90deg) translateZ(50px);
  -moz-transform: rotateY(-90deg) translateZ(50px);
  -ms-transform: rotateY(-90deg) translateZ(50px);
  -o-transform: rotateY(-90deg) translateZ(50px);
  transform: rotateY(-90deg) translateZ(50px);
  background-color  : red;
}

.cube div:nth-child(5){ /*right*/
  -webkit-transform : rotateY(90deg) translateZ(50px);
  -moz-transform: rotateY(90deg) translateZ(50px);
  -ms-transform: rotateY(90deg) translateZ(50px);
  -o-transform: rotateY(90deg) translateZ(50px);
  transform: rotateY(90deg) translateZ(50px);
  background-color  : green;
}

.cube div:nth-child(6){ /*back*/
  -webkit-transform : translateZ(-50px);
  -moz-transform:  translateZ(-50px);
  -ms-transform:  translateZ(-50px);
  -o-transform:  translateZ(-50px);
  transform:  translateZ(-50px);
  background-color  : blue;
}