css3 页面翻转效果.

从事手机前端开发也有段时间了,最近重习了css3,html5...做了些小例子.
演示示例在这里
源码如下:

   1:  <html>

   2:      <head>

   3:          <title>Page turner</title>

   4:          <style>

   5:              /* Set 3D perspective */

   6:              body { -webkit-transform-style: preserve-3d;

   7:                  -webkit-perspective: 800px;

   8:                  text-align: center;

   9:              }

  10:              /* Define a page */

  11:              .page { position: absolute; top: 50; height: 200; width: 150; padding: 25;

  12:                  background-color: #ffcc99; padding: 15;

  13:                  border-radius: 10; border: 1px solid tan;

  14:                  /* Animate transforms over 1.5 seconds */

  15:                  -webkit-transition: -webkit-transform 1.5s;

  16:                  /* Hide pages when flipped over */

  17:                  -webkit-backface-visibility: hidden;

  18:              }

  19:              /* Front page pivots on left edge, is on right of screen when face up */

  20:              .front { left: 225; -webkit-transform-origin: 0px 0px;}

21:

  22:              /* Back page pivots on right edge, is on left of screen when face up */

  23:              .back  { left: 50; -webkit-transform-origin: 100% 50%;

  24:                  /* back of page starts flipped over */

  25:                  -webkit-transform: rotateY(180deg);

  26:              }

  27:          </style>

  28:          <script type="text/javascript">

  29:  // Flip page front-to-back

  30:  function flip() {

  31:      document.getElementById("frontPage").style.webkitTransform = "rotateY(-180deg)";

  32:      document.getElementById("backPage").style.webkitTransform="rotateY(0deg)";

  33:  }

  34:  // Flop page back to front

  35:  function flop() {

  36:      document.getElementById("frontPage").style.webkitTransform = "rotateY(0deg)";

  37:      document.getElementById("backPage").style.webkitTransform="rotateY(180deg)";

  38:  }

  39:  // Initialize event handlers on page load

  40:  function init() {

  41:      // Click event marks a mouse click

  42:      document.getElementById("frontPage").addEventListener("click", flip, false);

  43:      document.getElementById("backPage").addEventListener("click", flop, false);

  44:      // Touchend event marks end of tap or swipe

  45:      document.getElementById("frontPage").addEventListener("touchend", flip, false);

  46:      document.getElementById("backPage").addEventListener("touchend", flop, false);

  47:      // Touchstart event means we can remove click event listeners

  48:      document.body.addEventListener("touchstart", noClicks, false);

  49:      // Allow user to swipe without scrolling the page

  50:      document.body.addEventListener("touchmove", noScroll, false);

  51:  }

52:

  53:  // Prevent a swipe from scrolling the browser page

  54:  function noScroll(e) {

  55:      event.preventDefault();

  56:  }

  57:  // If we're getting touch events, remove click handlers

  58:  function noClicks(e) {

  59:      document.getElementById("frontPage").removeEventListener("click", flip, false);

  60:      document.getElementById("backPage").removeEventListener("click", flop, false);

  61:      // only need to do this once, so remove this handler now that its job is done

  62:      document.body.removeEventListener("touchstart", noClicks, false);

  63:  }

  64:  </script>

  65:  </head>

66:

  67:  <body onload="init();">

  68:      <h2>Click, tap, or swipe to turn the page.</h2>

  69:      <div class="page back" id="backPage">

  70:          <p>Back</p>

  71:      </div>

  72:      <div class="page front" id="frontPage">

  73:          <p>Front</p>

  74:      </div>

  75:  </body>

  76:  </html>

77:

78:

posted on 2012-09-13 16:28 叶子绿阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/ms_config/archive/2012/09/13/2683576.html

css3 页面翻转效果.相关推荐

css3 3d翻转效果
css3 3d翻转效果 3d变换 perspective (透视,视角): 属性定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图.决定了你所看到的是2D tr ...
css3实现翻转效果,css3 实现3D翻转效果
css3 实现3D翻转效果. HTML源码: 前面内容,鼠标移到这,试试用户名密码 css源码: /* entire container, keeps perspective */ .flip-c ...
css3 抽奖实现炸弹爆炸效果卡片翻转效果雪花效果
一.业务背景: 最近接了一个"扎水球"的小程序项目,用户使用"金针"扎破水球,可以扎到奖励,或者扎到炸弹,其实也可以看作是一次抽奖,扎破水球后,显示对应的奖励. ...
css3 transition cube(立方体翻转效果)
一.构建页面 <div class="container perspective"><div class="transition effect1 car ...
CSS3 transform3D 图片翻转效果
基本思路来自于CSS3 transform3D 图片翻转效果一贴基于上帖基本实现一个3D 图片翻转效果demo,为了再加一个延时便成为下图效果: 代码如下: <!doctype html> ...
html5 猫特效,html5特效-css3页面元素切换墨水喷墨效果
css3页面元素切换墨水喷墨效果,层元素弹出关闭时超好看的墨水喷墨特效,下载:层元素弹出关闭时超好看的墨水喷墨特效完整源码下载密码: qm34 下面是预览图 CSS3墨水喷墨特效 style.cs ...
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计
html和css3 js 3D 相框动画翻转效果id1084-网页前端设计源码下载地址在新演示地址 <!DOCTYPE html> <html lang="en&quo ...
css3实现3D立体翻转效果
1.在IE下无法显示翻转效果,火狐和谷歌可以 1 /*样式css*/ 2 3 .nav-menu li { 4 display: inline; 5 } 6 .nav-menu li a { 7 co ...
CSS3实现图片翻转效果
直接上代码看效果 html: <div class="father"><div class="before">正面</div> ...

css3 页面翻转效果.

css3 页面翻转效果.相关推荐

最新文章

热门文章