AngularJS: как создать эффект вращения трехмерного куба с помощью ng-animate и ng-view?

Я пытаюсь получить 3D-анимацию с эффектом куба с помощью ng-animate и ng-view.

Когда я переключаюсь на другую страницу, я хотел бы чувствовать, что ям вращается на кубе. Когда я нажимаю "Перейти на страницу 2 ", Настоящий "Страница 1" уходил и вращался влево иСтраница 2" прибыл бы справа. Я

у меня что-то приближается, но с действительно грязными переходами CSS и когда я переключаю страницы, они не "придерживаться" все вместе.

Пример кода:http://jsfiddle.net/bnyJ6/I»

мы пробовали так:

HTML:




    



   
        
            PAGE 1

        Go Page 2
        
   



   
        
            PAGE 1
        Go page 1
        
   

Угловой JS:

var app = angular.module('demo', []);

app.config(function ($routeProvider) {
  $routeProvider
  .when('/one', {
    templateUrl:'page1.html'
  })
  .when('/two', {
    templateUrl:'page2.html'
  })
  .otherwise({
    redirectTo:'/one'
  });
});

app.controller('MainCtrl', function($scope, $rootScope, $location) {
  $scope.go = function(path) {
    $location.path(path);
  }
});

CSS3-Dirty- Анимация:

.animation{


    -webkit-perspective:2000px;
    -moz-perspective:2000px;
    -o-perspective: 2000px;
    perspective: 2000px;
}

.cube {

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}



.animate-enter, 
.animate-leave { 

    -webkit-transition: 3000ms linear all;
    -moz-transition: 3000ms linear all;
    -ms-transition: 3000ms linear all;
    -o-transition: 3000ms linear all;
    transition: 3000ms linear all;
    position: absolute;

}

.animate-enter {
    background-color:green;
    -webkit-transform: rotateY(   90deg ) translateZ(600px ) translateX(585px) ;
    -moz-transform: rotateY(   90deg )  translateZ(600px ) translateX(585px);
    -o-transform: rotateY(   90deg )  translateZ( 600px ) translateX(585px);
    transform: rotateY(   90deg )   translateZ( 600px) translateX(585px);

    opacity: 0;
}

.animate-enter.animate-enter-active{
    background-color:yellow;

    -webkit-transform: rotateY(  0deg ) translateX(250px) translateZ(400px );
    -moz-transform: rotateY(  0deg ) translateX(250px) translateZ(400px );
    -o-transform: rotateY(  0deg )translateX(250px) translateZ(401px );
    transform: rotateY(  0deg )  translateX(250px) translateZ( 400px );
    opacity: 1;
}

.animate-leave {
    background-color:gray;
    -webkit-transform: rotateY(  -90deg ) translateZ( 361px );
    -moz-transform: rotateY(  -90deg ) translateZ( 361px );
    -o-transform: rotateY( -90deg) translateZ( 361px );
    transform: rotateY( -90deg) translateZ( 361px );
    opacity: 0;
}

Вы хоть представляете, как получить анимацию с эффектом 3D Cube?

Спасибо за любую помощь, которую вы можете оказать.

Ответы на вопрос(2)

Ваш ответ на вопрос