css3 3D翻书. 

<head>
<style type="text/css">
.box{ position:relative; width:500px; height:500px; margin:100px auto; border:#03C solid 2px;-moz-perspective: 1500px;}
.a{-moz-transform-style: preserve-3d;-moz-transition-duration: 1000ms;-moz-transition-property: all;-moz-transition-timing-function: ease-out;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    -moz-transform: rotate3d(0, 1, 0, 0deg);
    -moz-transform-origin:right top;
    }
.b{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -moz-backface-visibility: hidden;
    background-color: red;
    -moz-transform:rotateX(0deg) rotateY(0deg) translateZ(0px);
}
.c{
    -moz-backface-visibility: hidden;
    -moz-transform: rotate3d(0, 1, 0,180deg);
    background-color: #000000;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.box:hover .a{
    -moz-transform: rotate3d(0 , 1, 0, 180deg);
}
</style>
</head>

<body>
<div class="box">
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
</div>
</body>

请用FF观看,要兼容其他浏览器请自己添加相关CSS3属性.

posted @ 2012-10-12 15:30  zwei1989  阅读(1179)  评论(0)  编辑  收藏  举报