Skip to content

Instantly share code, notes, and snippets.

@FranckErnewein
Created December 4, 2013 09:30
Show Gist options
  • Save FranckErnewein/7784781 to your computer and use it in GitHub Desktop.
Save FranckErnewein/7784781 to your computer and use it in GitHub Desktop.
A Pen by Franck Ernewein.
<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>
$(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 );
});
});
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);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment