A Pen by Franck Ernewein.

Cube-rotation-with-CSS3.markdown

Cube rotation with CSS3

A Pen by Franck Ernewein on CodePen.

License.

index.html

<div id="cube-content">
		<div class="cube">
			<div class="front">front</div>
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="top">top</div>
			<div class="back">back</div>
			<div class="bottom">bottom</div>
		</div>
</div>
<form>
  rotation X: 0°<input type="range" name="rotateX" min="0" max="360" step="1" value="0" />360°<br>
  rotation Y: 0°<input type="range" name="rotateY" min="0" max="360" step="1" value="0" />360°<br>
  rotation Z: 0°<input type="range" name="rotateZ" min="0" max="360" step="1" value="0" />360°<br>
  <pre></pre>
</form>

script.js

$(document).ready( function(){

  var cube = $('.cube');
  var input = $('input');
  var pre = $('pre');
  $('form').change( function(){
     
     var transform = '';
     input.each( function(){
       transform += this.name + '(' + this.value + 'deg) '; 
     });
    pre.html( 'transform: ' + transform );
    
     cube.css('-webkit-transform', transform );
  });
  
});

style.less

body{
   font-family: sans-serif; 
}
#cube-content{
	@w: 200px;	
  margin: 100px;
	width: @w;
	height: @w;
	border: 1px dotted black;
	-webkit-perspective: 1000px;
	-webkit-perspective-origin: 50% 50%;
	.cube{
		width: @w;
		height: @w;
		-webkit-transform-style: preserve-3d;
		-webkit-transition: all 0.4s ease 0.2s;
		div{
			position: absolute;
			width: @w;
			height: @w;
			opacity: 0.4;
			background: #aaa;
			border: 1px solid #000;
			//-webkit-transition: all 0.05s;
      text-align: center;
      font-size: 20px;
      line-height: @w;
		}

		.left{
			-webkit-transform: translateX(-50%) rotateY( -90deg );
		}
		.right{
			-webkit-transform: translateX(50%) rotateY( 90deg );
		}
		.top{
			-webkit-transform: translateY(50%) rotateX( 90deg );
		}
		.bottom{
			-webkit-transform: translateY(-50%) rotateX( -90deg );
		}
		.front{
			-webkit-transform: translateZ(@w/2);
		}
		.back{
			-webkit-transform: translateZ(-@w/2);
		}
		
	}

}