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

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.

I just modified ur css...have a look if it looks better...can be improved further

http://jsfiddle.net/ctdrY/

Modified class

    .animate-enter.animate-enter-active{    background-color:yellow;    -webkit-transform: rotateY(  0deg ) translateX(50px) translateZ(400px );    -moz-transform: rotateY(  0deg ) translateX(50px) translateZ(400px );    -o-transform: rotateY(  0deg )translateX(50px) translateZ(401px );    transform: rotateY(  0deg )  translateX(50px) translateZ( 400px );    opacity: 1;}