css动画实现翻书效果

/*翻书效果*/
 .MapLayerpage
  {
    transform-origin: right;   //控制翻书的方向，right是右边固定
    transform-style: preserve-3d;
    animation-name: MapLayerpage;
    animation-duration: 1s;
    animation-timing-function: linear;
  }

  @keyframes MapLayerpage {   
  0%{   
        transform: rotatey(0deg);   
     }   
 100%{   
        transform: rotatey(-90deg);                   
     }             

  }

 $(this._MapLayer).addClass("MapLayerpage");//把要实现翻书效果的控件添加MapLayerpage