HTML5 CSS3, one of the 3D transform analytical learning

Recently found in the subway "Asian Animal Fund" on the subway to do a lot of public service ads, more attractive is the one-month bear ads. It's lovely to do. Go back to search a bit, found this site is HTML5 do, very cool.

So want to learn, the method is the traditional way of learning, imitation, analysis, see how people do.

This site provides an immersive browsing experience that allows users to experience a real 3D turn-book effect when the page is switched, very cool. To achieve this effect, you need to use the CSS3 3D transform and JavaScript, and in order to achieve a unified experience across browsers and across devices, use the Hammer.js library to handle sliding operations. This is the following, very beautiful:

Example effect:

Look at the code found that the structure of the Web page is very simple, the entire magazine is a magazine ID div, child elements. Page, which is also included, contains one layer. Page-content layer.

<div id= "magazine" >     <div class= "page" >         <div class= "Page-content" >             <!--  ...-->         </div>     </div>      <!--  pages-->     <div class= "page" >          <div class= "Page-content" >             <!--   ...-->         </div>     </div> </div > CSS:. page {    position:absolute     top:0     left:0;  &nb
sp;  width:100%;
    height:100%;
    Overflow:hidden;
    Display:none; }. page-content {    position:absolute;   &nbsp
top:0;
    left:0;
    width:100%;
    height:100%; }

When the user drags the page, we copy a copy of the current page and the next page, as the elements of the 3D page are present, and the relationships between the layers are as follows:

$currentPage-> Current Page

$newPage-> A new page (previous page/next page)

The $newpage of $pageBack-> clones

The $currentpage of $pageFront-> clones

In addition to the other pages of the current page, to display only half of the page, you need to set the width of the outer div to 50%, and set the. page-content to 200%.

CSS:
. Page.front,
. Page.back,.
Page.prev,
. page.next {
width:50%;
}
. Page.front. Page-content,
page.back page-content,. Page.prev. Page-content
,. Page.next
. page-content {
width:200%;
}

When you start dragging, use the mouse position to determine the direction of the page in the left or right side of the screen and copy the pages. Then, when dragging, the page is calculated according to the moving distance and converted to an angle applied to the element. Finally, use CSS transition to complete the rest of the animation.

JS Code key parts:

$ ("#magazine"). Hammer ({prevent_default:true}). On ("DragStart", function (event) {   //start dragging  
   //According to the position of the pointer to determine whether the new page is the previous page or the next page     var pagex = Event.gesture.center.pageX;     _ $newPage = Pagex > CenterX?
_. $currentPage. Next (". Page"). AddClass ("Next"): _. $currentPage. Prev (". Page"). AddClass ("prev");      //copy of the current page and a new page     _. $pageFront = $ ("<div class= ' page front '/>"). Append (_
. $currentPage. Children (). Clone ());
    _. $pageBack = $ ("<div class= ' page back/>"). Append (_. $newPage. Children (). Clone ());
      $ (this). On ("Drag", function (event) {       //drag          //Get gesture Direction         var direction
= Event.gesture.direction;          //If the slide is left or right, then continue         if ( DirectioN!= "left" && direction!= ' right ' return;          //Get mouse x coordinates, and window width division get percent and angle          var deltax = Math.max (_.direction = "Left" -1:1) * Event.gesture.deltaX, 0), &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&N bsp;      progress = deltax/winwidth,         
    angle = (Direction = "Left" -180:180) * progress;          //Use Transform Flip page         _.$
PAGEFRONT.CSS ("Transform", "Perspective (2200px) Rotatey (" + angle + "deg)");         _ $pageBack. CSS ("transform", "Perspective (2200px) Rotatey (" + angle-180
) + "deg)");
     }). On ("Dragend", function (event) {       //drag end           var deltax = Math.max (Direction = = "Left"? -1:1) * Event.gesture.deltaX, 0),             time = Event.gesture.deltaTime,             progress = deltax/ Winwidth,             flipped = progress > 0.5 Deltax/time & Gt 0.5,//If the sliding distance exceeds half of the screen or the speed is greater than 0.5, the page is considered to have been turned over             Duration =!flipped? 1-progress:progress,             angle =!flipped? 0: _.direction = "Left"?
-180:180;          /through CSS3 transition to complete the rest of the animation          _ $pageFront. css ({            "transition": "All" + Duration + "s ease-out",             "transform": " Perspective (2200px) Rotatey ("+ Angel+ "deg)"        });         _ $pageBack. css ({             "transition": "All" + Duration + "s Ease-out",              "Transform": "Perspective (2200px) Rotatey (" + (angel-180) + "deg)"      &
nbsp; });
   }); });

If your page contains elements like video or canvas, you'll need to do some extra work because these elements cannot be copied directly in the same state.

Finally, if you need to be compatible with CSS3 browsers, not supported. Modernizr can be used to determine the level of sliding to switch the page.

if (modernizr.csstransforms3d && modernizr.csstransitions) {

Support

} else {

does not support

};