《月熊志》为大家提供了一个沉浸式的翻阅体验，用户可以在页面切换时体验到真实的3D翻书效果，非常的酷炫。而要实现这个效果，需要用到CSS3 3D transform和JavaScript，同时为了实现跨浏览器和跨设备的统一体验，用到hammer.js库去处理滑动操作。

示例效果：

网页的结构十分简单，整个杂志是一个ID为magazine的div，子元素. page即页面元素，其中还需要包含一层.page-content层。

css:

.page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    display: none; 
} 
.page-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

当用户拖拽页面时，我们会复制一份当前页和下一页，作为3D翻页的元素存在，层之间的关系如下：

$currentPage -> 当前页

$newPage -> 新的一页(上一页/下一页)

$pageBack -> 克隆的$newPage

$pageFront -> 克隆的$currentPage

除了当前页的其他页面，为了只显示页面一半，需要将外层div的宽度设置为50%，同时将.page-content设为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%; 
} 

当开始拖拽时，通过鼠标位置在屏幕的左边或者右边判断翻页的方向并复制页面。然后在拖拽时，根据移动距离计算翻页进度并转换为角度应用到元素上。最后使用css transition完成余下动画。

JS代码关键部分：

$("#magazine").hammer({prevent_default: true}).on("dragstart", function(event) { 
    //开始拖拽 
 
    //根据指针的位置判断新的一页是上一页还是下一页 
    var pageX = event.gesture.center.pageX; 
    _.$newPage = pageX > centerX ? _.$currentPage.next(".page").addClass("next") : _.$currentPage.prev(".page").addClass("prev"); 
 
    //复制当前页和新的一页 
    _.$pageFront = $("<div class='page front' />").append(_.$currentPage.children().clone()); 
    _.$pageBack = $("<div class='page back/>").append(_.$newPage.children().clone()); 
 
    $(this).on("drag", function(event) { 
        //拖拽中 
 
        //获得手势方向 
        var direction = event.gesture.direction; 
 
        //如果是左右滑动才继续 
        if (direction != "left" && direction != "right") return; 
 
        //获得鼠标x坐标，和窗口宽度相除获得百分比和角度 
        var deltaX = Math.max((_.direction == "left" ? -1 : 1) * event.gesture.deltaX, 0), 
            progress = deltaX / winWidth, 
            angle = (direction == "left" ? -180 : 180) * progress; 
 
        //使用transform翻转页面 
        _.$pageFront.css("transform", "perspective(2200px) rotateY(" + angle + "deg)"); 
        _.$pageBack.css("transform", "perspective(2200px) rotateY(" + (angle - 180) + "deg)"); 
 
    }).on("dragend", function(event) { 
        //拖拽结束 
 
        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 > 0.5, //如果滑动距离超过屏幕的一半或者速度大于0.5就认为页面被翻过去了 
            duration = !flipped ? 1 - progress : progress, 
            angle = !flipped ? 0 : _.direction == "left" ? -180 : 180; 
 
        //通过css3 transition完成余下动画 
        _.$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)" 
        }); 
    }); 
}); 

如果你的页面包含视频或者Canvas等元素，那还需要再做一些额外的工作，因为这些元素并不能以同样的状态被直接复制。

最后如果你需要兼容不支持CSS3浏览器。可以借助Modernizr判断，以水平滑动的方式切换页面。

if (Modernizr.csstransforms3d && Modernizr.csstransitions) { 
    //支持 
} else { 
    //不支持 
};