Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="UTF-8">
- <title>CSS 3D Flipping Cards/Tiles</title>
- <style>
- /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
- html, body {
- background: #0077ea;
- }
- .container {
- width: 90%;
- }
- .container h1, .container h2,.container h4 {
- text-align: center;
- color: white;
- }
- .container a {
- color: inherit;
- }
- .tiles {
- width: 100%;
- height: 100%;
- }
- li {
- width: 100px;
- height: 100px;
- display: inline-block;
- position: relative;
- -webkit-perspective: 800;
- margin: 1px 2px;
- }
- .tile {
- width: 100%;
- height: 100%;
- position: absolute;
- -webkit-transform-style: preserve-3d;
- -webkit-transition: -webkit-transform 0.6s;
- }
- .tile .tile-front, .tile .tile-back {
- position: absolute;
- height: 100%;
- width: 100%;
- -webkit-backface-visibility: hidden;
- }
- .tile .tile-front {
- background: dodgerblue;
- -webkit-transition: -webkit-transform 0.3s;
- }
- .tile .tile-front:hover {
- background: #51a9ff;
- -webkit-transform: scale(1.0);
- }
- .tile .tile-back {
- background-color: orange;
- -webkit-transform: rotateY(180deg);
- }
- .tile .tile-back:hover {
- background: #ffb733;
- }
- .tile .tile-back img {
- width: 100%;
- height: 100%;
- }
- .tile.flipped {
- -webkit-transform: rotateY(180deg);
- }
- .disabled {
- pointer-events: none;
- opacity: 0.5;
- }
- </style>
- <style type="text/css">
- <!--
- input {
- width:80%;
- font-size:1em;
- border:1px solid #225588;
- padding:10px 10px 10px 10px;
- border-radius:5px;
- margin-bottom:10px;
- }
- #buttonx {
- width:20%;
- color:#ffffff;
- background:#337fcc;
- font-family: fantasy,sans-serif;
- font-size:24px;
- font-weight:bold;
- text-shadow:0 1px 0px #143352,0 2px 0px #143352;
- text-align:center;
- display:inline-block;
- text-decoration:none;
- border:1px solid #225588;
- padding:15px 0 12px 0;
- border-radius:5px;
- margin-bottom:10px;
- }
- -->
- </style>
- <script type="text/javascript">
- function doDataLink(data) {
- // alert(data);
- Android.dataLink(data);
- }
- </script>
- </head>
- <body>
- <div class="container">
- <h1>2K衰弱</h1>
- <h4>簡単♪簡単♪ 2枚一致でOK!普通の神経衰弱</h4>
- <h4>codepen.ioのゲームをバグ修正しただけ…</h4>
- <ul class="tiles"></ul>
- </div>
- <div>
- <a id="buttonx" onmouseover="this.style.background='#43cd80'" onmouseout="this.style.background='#337fcc'" onclick="this.style.background='#43cd80';doDataLink('//x//')">やめる</a>
- </div>
- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
- <script src="gmindex.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement