'Page Turner' Test

The Markup

A diagram of the structure

The CSS

div#turner {
position:relative;
float:left;
padding-top:11px;
width:302px;
height:210px;
background: transparent url(http://www.sitepoint.com/images/books/frame.jpg) 0px 6px no-repeat;
}
#leftpage, #rightpage {
float:left;
position:relative;
background-image:url(http://www.sitepoint.com/images/books/javascript1/10page.jpg);
overflow:hidden;
width:146px;
height:189px;
left:5px;
}
#leftpage{
background-position:0 0;
}
#rightpage{
background-position:146px 0
}
div#flip{
background: transparent url(http://www.sitepoint.com/examples/jquery/3d.png) top center;
height:210px;
width:118px;
position:absolute;
top:0;
left:90px;
z-index:99;
margin-bottom:0;
padding-bottom:0
}