UDN-企业互联网技术人气社区

板块导航

浏览  : 984
回复  : 0

[干货] HTML5 3D书本翻页动画

[复制链接]
呵呵燕的头像 楼主
发表于 2016-12-4 13:59:57 | 显示全部楼层 |阅读模式
  这是一款十分炫酷的HTML5 3D书本翻页动画,效果相对比较简单,拖拽鼠标模拟用手翻页,更漂亮的是翻页过程中,呈现出逼真的3D立体效果。书本中的文字和图片也会3D展示,非常酷。

1.png

  HTML代码

  1. <div class="book p3d">
  2.     <div class="back-cover p3d">
  3.         <div class="page back flip"></div>
  4.         <div class="page front p3d">
  5.             <div class="shadow"></div>
  6.             <div class="dino"></div>
  7.         </div>
  8.     </div>
  9.     <div class="front-cover p3d">
  10.         <div class="page front flip p3d">
  11.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum nisl quis nulla eleifend dignissim. Curabitur varius lobortis tincidunt. Maecenas gravida, nulla quis luctus imperdiet, ipsum nibh consectetur ante, in sodales massa tortor eget neque. Donec porta ligula massa, id sagittis est. Ut nisl tellus, faucibus nec feugiat ut, laoreet iaculis felis. Suspendisse ultrices mauris vel tellus suscipit commodo. Integer vitae tortor erat. Pellentesque non tempor nisi.</p>
  12.         </div>
  13.         <div class="page back"></div>
  14.     </div>
  15. </div>
复制代码


  CSS代码

  1.   .book {

  2.   width: 300px;

  3.   height: 300px;

  4.   margin-top: -150px;

  5.   position: absolute;

  6.   left: 50%;

  7.   top: 50%;

  8.   -webkit-transform: rotateX(60deg);

  9.   -moz-transform: rotateX(60deg);

  10.   -ms-transform: rotateX(60deg);

  11.   -o-transform: rotateX(60deg);

  12.   transform: rotateX(60deg);

  13.   -webkit-user-select: none;

  14.   -moz-user-select: none;

  15.   -ms-user-select: none;

  16.   -o-user-select: none;

  17.   user-select: none;

  18.   }

  19.   .page {

  20.   width: 300px;

  21.   height: 300px;

  22.   padding: 1em;

  23.   position: absolute;

  24.   left: 0;

  25.   top: 0;

  26.   text-indent: 2em;

  27.   }

  28.   .front {

  29.   background-color: #d93e2b;

  30.   }

  31.   .back {

  32.   background-color: #fff;

  33.   }

  34.   .front-cover {

  35.   cursor: move;

  36.   -webkit-transform-origin: 0 50%;

  37.   -moz-transform-origin: 0 50%;

  38.   -ms-transform-origin: 0 50%;

  39.   -o-transform-origin: 0 50%;

  40.   transform-origin: 0 50%;

  41.   -webkit-transform: rotateY(0deg);

  42.   -moz-transform: rotateY(0deg);

  43.   -ms-transform: rotateY(0deg);

  44.   -o-transform: rotateY(0deg);

  45.   transform: rotateY(0deg);

  46.   }

  47.   .front-cover .back {

  48.   background-image: url(mdn.png);

  49.   background-repeat: no-repeat;

  50.   background-position: 50% 50%;

  51.   -webkit-transform: translateZ(3px);

  52.   -moz-transform: translateZ(3px);

  53.   -ms-transform: translateZ(3px);

  54.   -o-transform: translateZ(3px);

  55.   transform: translateZ(3px);

  56.   }

  57.   .back-cover .back {

  58.   -webkit-transform: translateZ(-3px);

  59.   -moz-transform: translateZ(-3px);

  60.   -ms-transform: translateZ(-3px);

  61.   -o-transform: translateZ(-3px);

  62.   transform: translateZ(-3px);

  63.   }

  64.   .p3d {

  65.   -webkit-transform-style: preserve-3d;

  66.   -moz-transform-style: preserve-3d;

  67.   -ms-transform-style: preserve-3d;

  68.   -o-transform-style: preserve-3d;

  69.   transform-style: preserve-3d;

  70.   }

  71.   .flip {

  72.   -webkit-transform: rotateY(180deg);

  73.   -moz-transform: rotateY(180deg);

  74.   -ms-transform: rotateY(180deg);

  75.   -o-transform: rotateY(180deg);

  76.   transform: rotateY(180deg);

  77.   }

  78.   .dino,

  79.   .shadow {

  80.   width: 196px;

  81.   height: 132px;

  82.   position: absolute;

  83.   left: 60px;

  84.   top: 60px;

  85.   -webkit-transform-origin: 0 100%;

  86.   -moz-transform-origin: 0 100%;

  87.   -ms-transform-origin: 0 100%;

  88.   -o-transform-origin: 0 100%;

  89.   transform-origin: 0 100%;

  90.   }

  91.   .dino {

  92.   background: url(dino.png) no-repeat;

  93.   }

  94.   .shadow {

  95.   background: url(shadow.png) no-repeat;

  96.   }
复制代码


  JavaScript代码

  1.   (function (window, document) {

  2.   var prefixes = ['Webkit', 'Moz', 'ms', 'O', ''],

  3.   book = document.querySelectorAll('.book')[0],

  4.   page = document.querySelectorAll('.front-cover')[0],

  5.   dino = document.querySelectorAll('.dino')[0],

  6.   shadow = document.querySelectorAll('.shadow')[0],

  7.   hold = false,

  8.   centerPoint = window.innerWidth / 2,

  9.   pageSize = 300,

  10.   clamp = function (val, min, max) {

  11.   return Math.max(min, Math.min(val, max));

  12.   };

  13.   page.onmousedown = function () {

  14.   hold = true;

  15.   };

  16.   window.onmouseup = function () {

  17.   if (hold) {

  18.   hold = false;

  19.   }

  20.   };

  21.   window.onresize = function () {

  22.   centerPoint = window.innerWidth / 2;

  23.   };

  24.   window.onmousemove = function (evt) {

  25.   if (!hold) {

  26.   return;

  27.   }

  28.   var angle = clamp((centerPoint - evt.pageX + pageSize) / pageSize * -90, -180, 0),

  29.   i, j;

  30.   for (i = 0, j = prefixes.length; i < j; i++) {

  31.   book.style[prefixes[i] + 'Transform'] = 'rotateX(' + (60 + angle / 8) + 'deg)';

  32.   page.style[prefixes[i] + 'Transform'] = 'rotateY(' + angle + 'deg)';

  33.   dino.style[prefixes[i] + 'Transform'] = 'rotateX(' + (angle / 2) + 'deg)';

  34.   shadow.style[prefixes[i] + 'Transform'] = 'translateZ(1px) skewX(' + (angle / 8) + 'deg)';

  35.   }

  36.   };

  37.   })(window, document);
复制代码


  以上就是HTML5 3D书本翻页动画的示例代码,有兴趣的朋友可以下载完整代码研究。

原文作者:佚名  来源:开发者头条

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部