Div元素不会保持所需的宽高比

时间:2014-06-27 06:48:15

标签: javascript html css css3

我想创造记忆游戏。我想在4行中放置6张卡片。问题是DIV元素是"背后"卡片是可见的并且破坏了整个设计(我的代码中z-index3.back class)。如果我放display.none back .class但是阻止卡片图片的问题,它会正常工作。

以下是我正在使用的代码

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 back of pane during swap */
/* front pane, placed above back */
/* back, initially 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

1 个答案:

答案 0 :(得分:0)

它采用图像的整个背景,因此您最好将每个图像保留在仅限于该图像的特定div中。