javascript - Div elements won't keep desired aspect ratio -
i want create memory game. want place 6 cards in 4 rows. problem div element "behind" card visible , ruin whole design (z-index3 or .back class inside code).it's working if put display.none .class problem blocks picture of card.
here code using
html
<body> <div id="picbox"> <span id="boxbuttons"> <span class="button" id="rezz"> rezultat <span id="counter">0</span> </span> <span class="button" id="ttime">00 : 22</span> <span class="button"> <a onclick="resetgame();">reset</a> </span> <span class="button"> <a onclick="mutedsound();">mute sound</a> </span> </span> <div id="boxcard" align="center"> <div class="flipper" id="flipper10"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div> </div> <div class="flipper" id="flipper11"> <div class="front"></div> <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div> </div> <div class="flipper" id="flipper12"> <div class="front"></div> <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/volleyball-icon.png"></div> </div> <div class="flipper" id="flipper13"> <div class="front"></div> <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div> </div> <div class="flipper" id="flipper14"> <div class="front"></div> <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div> </div> <div class="flipper" id="flipper15"> <div class="front"></div> <div class="back"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png"></div> </div> <div class="flipper" id="flipper16"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div> </div> <div class="flipper" id="flipper17"> <div class="front"></div> <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div> </div> <div class="flipper" id="flipper18"> <div class="front"></div> <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div> </div> <div class="flipper" id="flipper19"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div> </div> <div class="flipper" id="flipper110"> <div class="front"></div> <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div> </div> <div class="flipper" id="flipper111"> <div class="front"></div> <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png"></div> </div> <div class="flipper" id="flipper20"> <div class="front"></div> <div class="back"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/volleyball-icon.png"></div> </div> <div class="flipper" id="flipper21"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png"></div> </div> <div class="flipper" id="flipper22"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png"></div> </div> <div class="flipper" id="flipper23"> <div class="front"></div> <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/skull-1-icon.png"></div> </div> <div class="flipper" id="flipper24"> <div class="front"></div> <div class="back"><img src="http://img3.uploadhouse.com/fileuploads/17699/17699259cb2d70c6882adc285ab8d519658b5dd7.png"></div> </div> <div class="flipper" id="flipper25"> <div class="front"></div> <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div> </div> <div class="flipper" id="flipper26"> <div class="front"></div> <div class="back"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png"></div> </div> <div class="flipper" id="flipper27"> <div class="front"></div> <div class="back"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png"></div> </div> <div class="flipper" id="flipper28"> <div class="front"></div> <div class="back"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png"></div> </div> <div class="flipper" id="flipper29"> <div class="front"></div> <div class="back"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png"></div> </div> <div class="flipper" id="flipper210"> <div class="front"></div> <div class="back"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/skull-1-icon.png"></div> </div> <div class="flipper" id="flipper211"> <div class="front"></div> <div class="back"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992554c2ca340cc2ea8c0606ecd320824756e.png"></div> </div> </div> </div> <div id="window-resizer-tooltip"><a href="#" title="edit settings" style="background-image: url(chrome-extension://kkelicaakdanhinjdeammmilcgefonfh/images/icon_19.png);"></a><span class="tooltiptitle">window size: </span><span class="tooltipwidth" id="winwidth"></span> x <span class="tooltipheight" id="winheight"></span><br><span class="tooltiptitle">viewport size: </span><span class="tooltipwidth" id="vpwidth"></span> x <span class="tooltipheight" id="vpheight"></span></div> </body> css
* { margin: 0; padding: 0; } body { font: 18px verdana; color: #fff; background: #ccc; } #picbox { margin: 0px auto; width: auto; } #boxcard { /*perspective*/ -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; -o-perspective:1000; perspective:1000; display: table; margin: 0px auto; width: auto; z-index: 1; display: table; margin: 0px auto; width: auto; } .flipped { /*transform*/ -webkit-transform:rotatey(180deg); -moz-transform:rotatey(180deg); -ms-transform:rotatey(180deg); -o-transform:rotatey(180deg); transform:rotate(180deg); } .front, .back{ float: left; width: 100px; height: 120px; margin: 5px; padding: 5px; border: 4px solid #ee872a; cursor: pointer; border-radius: 10px; box-shadow: 0 1px 5px rgba(0,0,0,.5); z-index:2; background: #b1b1b1; /* position:absolute;*/ /*backface-visibility*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } /* flip speed goes here */ .flipper { /*transition*/ -webkit-transition:0.6s; -moz-transition:0.6s; -o-transition:0.6s; transition:0.6s; /*transform-style*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; position:relative; display: inline-block; position:relative; } /* hide of pane during swap */ /* front pane, placed above */ /* back, hidden pane */ .back{ /*transform*/ -webkit-transform:rotatey(180deg); -moz-transform:rotatey(180deg); -ms-transform:rotatey(180deg); -o-transform:rotatey(180deg); transform:rotate(180deg); z-index:3; } #boxbuttons { text-align: center; margin: 20px; display: block; } #boxbuttons .button { text-transform: uppercase; background: #ee872a; padding: 5px 10px; margin: 5px; border-radius: 10px; cursor: pointer; } #boxbuttons .button:hover { background: #999; } js
function opencard(){ $(this).toggleclass('flipped'); } $(".flipper").click(opencard); jsfiddle link
it's taking whole background of image better keep each image in specific div confined image only.
Comments
Post a Comment