《月熊志》为大家提供了一个沉浸式的翻阅体验，用户可以在页面切换时体验到真实的3D翻书效果，非常的酷炫。而要实现这个效果，需要用到CSS3 3D transform和JavaScript，同时为了实现跨浏览器和跨设备的统一体验，用到hammer.js库去处理滑动操作。 　　   　　示例效果： 　　   　　网页的结构十分简单，整个杂志是一个ID为magazine的div，子元素. page即页面元素，其中还需要包含一层.page-content层。 　　HTML: 　　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 = $(" 　　").append(_.$currentPage.children().clone()); 　　_.$pageBack = $(" 　　").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 { 　　//不支持 　　}; 　　其实，网站上还有很多特效的制作，大家可以自己前去体验：http://moonbear.animalsasia.org/ie/。希望本文能给大家带来一些灵感，运用到自己的网站开发上面去。