css3实现翻书效果

用css3的rotateY属性，以最右边边为转轴transform-origin:right;

1，html代码

<div id="gao2">
     <div id="gao">
         <img src="1.jpg" />
      </div>
</div>

2，css代码

#gao2{
   margin:100px auto;
   width:400px;
   border:1px solid #ccc;
   perspective:1000px; /*  透视，达到3D效果  必须的*/
}
#gao{
    background: #ccc;
    width:400px;
    height:400px;
    transform-origin:right; /*  动画基点，这里是以左边为基点 */
    -moz-animation:name 0.5s;  /*  兼容火狐浏览器 */
   animation:name 2s ;
}

 

/***定义动画**/

@-webkit-keyframes name{
    0%{   /*  动画开始 */
         transform:rotateY(90deg);  /*  旋转0度 */
    }
    100%{ /*  动画结束 */
        transform:rotateY(180deg);  /*  旋转到-100度  */
    }
}
@-moz-keyframes name{
       0%{transform:rotateY(90deg);}
       100%{transform:rotateY(180deg);}
}