CSS3中的Windows Phone菜单动画

Question

我正试图在3:02看到这个视频上的Windows手机动画，你可以看到动画：

http://youtu.be/E7a0QwubpUI?t=3m2s

动画关键帧：

@-webkit-keyframes rotateNavLeftIn {
from {
    -webkit-transform: translateX(-15%) scale(.4) rotateY(100deg);
    transform: translateX(-15%) scale(.4) rotateY(100deg);

}
to { 

}}


@keyframes rotateLeftOut {
from { }
to { 
    -webkit-transform: scale(.8) translate3d(-25%,-10%,0) rotateY(-90deg); 
    opacity:0;
}}

这是我的jsfiddle：

http://jsfiddle.net/aboutluca/f0f4n6dr/

正如你所看到的那样并不坏但不像真正的那样。我该怎么做才能改善它？

谢谢