Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$(function(){
var W = $(window).width();
var H = $(window).height();
$('.cube').css({
'-webkit-transform':'translateZ(-'+H/2+'px)',
'transform':'translateZ(-'+H/2+'px)'
});
$('.cube,.cube div').css({width :W,height:H});
$('.cube_top').css({top:-H/2});
$('.cube_bottom').css({bottom:-H/2});
$('.cube_front').css({
'-webkit-transform':'translateZ('+H/2+'px)',
'transform':'translateZ('+H/2+'px)'
});
$('.cube_back').css({
'-webkit-transform':'translateZ(-'+H/2+'px) rotateX(180deg)',
'transform':'translateZ(-'+H/2+'px) rotateX(180deg)'
});
$('.nav').hide();
$('.cube_front').children().slideDown(3000);
function setCube(){
wW = $(window).width();
wH = $(window).height();
$('.cube').css({
'-webkit-transform':'translateZ(-'+wH/2+'px)',
'transform':'translateZ(-'+wH/2+'px)'
});
$('.cube,.cube div').css({width :wW,height:wH});
$('.cube_top').css({top:-wH/2});
$('.cube_bottom').css({bottom:-wH/2});
$('.cube_front').css({
'-webkit-transform':'translateZ('+wH/2+'px)',
'transform':'translateZ('+wH/2+'px)'
});
$('.cube_back').css({
'-webkit-transform':'translateZ(-'+wH/2+'px) rotateX(180deg)',
'transform':'translateZ(-'+wH/2+'px) rotateX(180deg)'
});
}
setCube();
var degIndex = 0;
setInterval(function(){
degIndex++;
var deg = $('.nav div a').eq(degIndex).data('deg');
$('.cube').css({
'-webkit-transform':'translateZ(-'+wH/2+'px) rotateX('+deg+'deg)',
'transform':'translateZ(-'+wH/2+'px) rotateX('+deg+'deg)'
});
(degIndex==3)&&(
setTimeout(function(){
$('.nav').show();
},2000)
);
},5000);
$(document).on('click', '.nav a', function(event) {
event.preventDefault();
var deg = $(this).data('deg');
$('.cube').css({'transform':'translateZ(-'+wH/2+'px) rotateX('+deg+'deg)'});
});
$(window).on('resize',function(){
setCube();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment