AngularJS: with ng-animate & ng-view, how to make a 3D cube rotation effect?

Question

I'm trying to get a 3D cube effect animation with ng-animate and ng-view.

When I switch to another page, I would like to feel like I’m rotating on a cube. When I click on "Go Page 2", the actual "Page 1" would leave and rotate to the left and the "Page 2" would arrive from the right.

I’ve got something approaching but with really dirty CSS transitions and when I switch pages, they are not "stick" together.

Code sample: http://jsfiddle.net/bnyJ6/

I've tried like this:

HTML :

<style ng-bind-html-unsafe="style"></style>

<div class="cube container">
    <div ng-view ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}" ></div>
</div>

<script type="text/ng-template" id="page1.html">
   <div class="container " >
        <div class="masthead">
            <h1 class="muted">PAGE 1</h1>

        <button class="btn display-button" ng-click="direction('front');go('/two')">Go Page 2</button>
        </div>
   </div>
</script>

<script type="text/ng-template" id="page2.html">
   <div class="container " >
        <div class="masthead">
            <h1 class="muted">PAGE 1</h1>
        <button  class="btn display-button" ng-click="direction('back');go('/one')"  >Go page 1</button>
        </div>
   </div>
</script>

Angular 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:

.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;
}

Have you any idea of how get this 3D Cube effect animation?

Thanks for all kind of help you can provide.

Answer 1

I'd like to throw this into the ring:

http://jsfiddle.net/bnyJ6/1/

.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 -webkit-transform, 3000ms linear opacity, 3000ms linear background-color;
    -moz-transition: 3000ms linear -moz-transform, 3000ms linear opacity, 3000ms linear background-color;
    -o-transition: 3000ms linear -o-transform, 3000ms linear opacity, 3000ms linear background-color;
    transition: 3000ms linear transform, 3000ms linear opacity, 3000ms linear background-color;
    position: absolute;
}

.animate-enter {
    background-color: green;

    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;

    -webkit-transform: translateX(100%) rotateY(90deg);
    -moz-transform: translateX(100%) rotateY(90deg);
    -o-transform: translateX(100%) rotateY(90deg);
    transform: translateX(100%) rotateY(90deg);

    opacity: 0;
}
.animate-enter.animate-enter-active {
    background-color: yellow;

    -webkit-transform: translateX(0%) rotateY(0deg);
    -moz-transform: translateX(0%) rotateY(0deg);
    -o-transform: translateX(0%) rotateY(0deg);
    transform: translateX(0%) rotateY(0deg);

    opacity: 1;
}

.animate-leave {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
.animate-leave.animate-leave-active {
    background-color: gray;

    -webkit-transform: translateX(-100%) rotateY(-90deg);
    -moz-transform: translateX(-100%) rotateY(-90deg);
    -o-transform: translateX(-100%) rotateY(-90deg);
    transform: translateX(-100%) rotateY(-90deg);

    opacity: 0;
}

The trick is to shift the transform-origin to the right for the first element, and to the left for the second element, that way both elements are transformed around the same point, making it look as if they were connected.

In order to make it finally work, the transition properties need to be targeted separately, otherwise it would animate the transform-origin property too, which would look funky. One would think that the proper use of setup and active classes for NgAnimate would prevent this behaviour, but unfortunately it doesn't. I guess the delay that Angular uses (currently 1 millisecond) before adding the active classes is too short.

ps. I guess you already knew, but this is not IE compatible.