1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
|
<!DOCTYPE html> <html lang="zh-cmn-Hans-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <title>翻转</title> <style> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; } a { display: block; text-decoration: none; color: } .box { width: 100px; height: 100px; margin: 50px auto; position: relative; transform-style: preserve-3d; transition: 1s all linear; transform:perspective(800px) rotateY(0deg); -webkit-transform-style: preserve-3d; -webkit-transition: 1s all linear; -webkit-transform:perspective(800px) rotateY(0deg); } .box .front, .box .back { width: 100px; height: 100px; line-height: 100px; text-align: center; position: absolute; left: 0; top: 0; } .box .front { z-index: 2; background: orange; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .box .back { z-index: 1; background: transform: scale(-1, 1); -webkit-transform: scale(-1, 1); } .box.active { transform: perspective(800px) rotateY(-180deg); -webkit-transform: perspective(800px) rotateY(-180deg); } </style> <script> window.onload = () { var aBox = document.querySelectorAll('.box'); var localArr = []; for(var i = 0; i< aBox.length; i++) { aBox[i].index = i; aBox[i].addEventListener('touchstart', () { this.classList.add('active'); localStorage.setItem('local' + this.index, this.index); }, false); var n = localStorage.getItem('local' + i); localArr.push(n); } for(var i =0; i < localArr.length; i ++) { if(localArr[i] != null) { aBox[i].classList.add('active'); } } }; </script> </head> <body> <div class="box"> <div class="front">点不动</div> <div class="back"> <a href="http://totozhangzhao.github.io">可点击</a> </div> </div> <div class="box"> <div class="front">点不动</div> <div class="back"> <a href="http://totozhangzhao.github.io">可点击</a> </div> </div> </body> </html>
|
近期评论