Помогите с поворотом элемента по осям.
 

Знатоки, помогите пожалуйста.
Есть такой сайт http://chudo.unixt.ru/cube/index.html

Две кнопки --> и<--

Кнопка выполняет действие поворота экрана в одну сторону, данное действие является правильным.

Но как сделать так, что бы кнопка <-- поворачивала экран наоборот в противоположную сторону, так же создавая эффект кубика?

Собственно сам скрипт поворота.

$(document).ready(function()
{
  //if( !Modernizr.csstransforms3d )
  //  alert('No supported');

  var container = document.getElementById('container');
  var front = document.getElementById('front');
  var front2 = document.getElementById('front2');
  var back  = document.getElementById('back');
  var back2  = document.getElementById('back2');
  var hidden = true;
  var hidden2 = true;
  // Set gradient running
  $('.front .h1').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(front).addClass('running') });
  $('a').hover(function(){ $(front).removeClass('running'); }, function(){ $(front).addClass('running'); });

  // Init CSS
  set_transform(back , 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');  
  set_transform(back2 , 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');

  // Move cube
  $('#open').click( function(e)
  {
    e.preventDefault();

    // Init perspective
    //container.perspective = (front.offsetWidth*1.5)+'px';
    if( hidden )
    {
      back.style.display = 'table';
      hidden = false;
    }
	

    $(front).removeClass('running');
    set_transform(front, 'rotateY(-90deg) translateX(-'+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');
    set_transform(back , 'rotateY(0) translateX(0) translateZ(0)');
  });
  
  // Move cube
  $('#close').click( function(e)
  {
    e.preventDefault();
    set_transform(front, 'rotateY(0) translateX(0) translateZ(0)');
    set_transform(back , 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');

    setTimeout(function(){ $(front).addClass('running') }, 1200);
  });
  
  // Move cube2
  $('#open2').click( function(e)
  {
    e.preventDefault();

    // Init perspective
    //container.perspective = (front.offsetWidth*1.5)+'px';

    if( hidden2 )
    {
      back2.style.display = 'table';
      hidden2 = false;
    }

    $(front).removeClass('running');
    set_transform(front, 'rotateY(-90deg) translateX(-'+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');
    set_transform(back2 , 'rotateY(0) translateX(0) translateZ(0)');
  });

  // Move cube2
  $('#close2').click( function(e)
  {
    e.preventDefault();
    set_transform(front, 'rotateY(0) translateX(0) translateZ(0)');
    set_transform(back2 , 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');

    setTimeout(function(){ $(front).addClass('running') }, 1200);
  });

  

  // Close success popin
  $('#success button').click(function()
  {
    $('#success .alert').removeClass('rollIn').addClass('rollOut animated');
    setTimeout(function(){ document.getElementById('contact-form').reset(); $('#success').removeClass('active'); }, 100);
    $('#close').trigger('click');
  });
});

function set_transform(node, str)
{
  node.style.webkitTransform = str;
  node.style.MozTransform = str;
  node.style.msTransform = str;
  node.style.OTransform = str;
  node.style.transform = str;
}

Вот именно кусок кода первой кнопки с именем #open #close

// Move cube
  $('#open').click( function(e)
  {
    e.preventDefault();

    // Init perspective
    //container.perspective = (front.offsetWidth*1.5)+'px';
    if( hidden )
    {
      back.style.display = 'table';
      hidden = false;
    }
	

    $(front).removeClass('running');
    set_transform(front, 'rotateY(-90deg) translateX(-'+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');
    set_transform(back , 'rotateY(0) translateX(0) translateZ(0)');
  });
  
  // Move cube
  $('#close').click( function(e)
  {
    e.preventDefault();
    set_transform(front, 'rotateY(0) translateX(0) translateZ(0)');
    set_transform(back , 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');

    setTimeout(function(){ $(front).addClass('running') }, 1200);
  });

Для второй кнопки код идентичный пока, но с именем #open2 #close2

Понимаю что нужно изменять цифры в осях, но посидя над ним рабочий день, решил обратиться сюда)

Проблему решил:D

// Move cube2
$('#open2').click( function(e)
{
e.preventDefault();

// Init perspective
//container.perspective = (front.offsetWidth*1.5)+'px';

if( hidden2 )
{
back2.style.display = 'table';
hidden2 = false;
}

$(front).removeClass('running');
set_transform(front, 'rotateY(90deg) translateX('+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');
set_transform(back2 , 'rotateY(0) translateX(0) translateZ(0)');
});

// Move cube2
$('#close2').click( function(e)
{
e.preventDefault();
set_transform(front, 'rotateY(0) translateX(0) translateZ(0)');
set_transform(back2 , 'rotateY(-90deg) translateX(-'+front.offsetWidth/2+'px) translateZ('+front.offsetWidth/2+'px)');

setTimeout(function(){ $(front).addClass('running') }, 1200);
});