从事手机前端开发也有段时间了,最近重习了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; 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: