CSS3转换无法正常工作

时间:2014-06-23 11:34:26

标签: javascript html css

我想翻转几个DIV元素。为此,我使用下面的代码。问题是DIV元素没有旋转(转换)。有人能告诉我问题在哪里吗?问候。我想翻转" card"格。

JavaScript:

document.querySelector("#" + id + " img").classList.toggle("flip");

CSS:

  #boxcard div{
    float: left;
    width: 100;
    height: 120;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
  background: #B1B1B1;
    z-index: 2;
}
#boxcard > div:nth-child(6n+1) {
    clear: both;
}
#boxcard div img {
    display: none;
    border-radius: 10px;
    z-index: 3;
}

.flip-container:hover .flipper, 
.flip-container.hover .flipper, 
.flip-container.flip .flipper {
    transform: rotateY(180deg);
}

HTML

<html>
   <head>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="_js/howler.min.js"></script>
      <script src="_js/jquery.flip.min.js"></script>
      <script src="_js/mem.js"></script>
      <style type="text/css"></style>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
   </head>
   <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 : 54</span>
         <span class="button">
         <a onclick="ResetGame();">Reset</a>
         </span> 
         </span>
         <div id="boxcard" align="center">
            <div id="card10" style="visibility: visible;"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699263b01721074bf094aa3bc695aa19c8d573.png" class="" style="display: none;"></div>
            <div id="card11" style="visibility: visible;"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992615db99bb0fd652a2e6041388b2839a634.png" class="" style="display: none;"></div>
            <div id="card12" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/reclusekc/kulo/96/Skull-1-icon.png" style="display: none;"></div>
            <div id="card13" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png" style="display: none;"></div>
            <div id="card14" style="visibility: visible;"><img src="http://img5.uploadhouse.com/fileuploads/17699/176992640c06707c66a5c0b08a2549c69745dc2c.png" style="display: none;"></div>
            <div id="card15" style="visibility: visible;"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png" style="display: none;"></div>
            <div id="card16" style="visibility: visible;"><img src="http://img6.uploadhouse.com/fileuploads/17699/17699262833250fa3063b708c41042005fda437d.png" style="display: none;"></div>
            <div id="card17" style="visibility: visible;"><img src="http://img7.uploadhouse.com/fileuploads/17699/1769925708af4fb3c954b1d856da1f4d4dcd548a.png" style="display: none;"></div>
            <div id="card18" style="visibility: visible;"><img src="http://img4.uploadhouse.com/fileuploads/17699/176992601ca0f28ba4a8f7b41f99ee026d7aaed8.png" style="display: none;"></div>
            <div id="card19" style="visibility: visible;"><img src="http://img9.uploadhouse.com/fileuploads/17699/176992568b759acd78f7cbe98b6e4a7baa90e717.png" style="display: none;"></div>
            <div id="card110" style="visibility: visible;"><img src="http://icons.iconarchive.com/icons/martin-berube/sport/96/Volleyball-icon.png" style="display: none;"></div>
            <div id="card111" style="visibility: visible;"><img src="http://img2.uploadhouse.com/fileuploads/17699/1769925824ea93cbb77ba9e95c1a4cec7f89b80c.png" style="display: none;"></div>

         </div>
      </div>
   </body>
</html>

1 个答案:

答案 0 :(得分:1)

您的CSS和HTML彼此之间没有太大关系。假设您希望card元素内的图像旋转,请尝试将CS​​S的最后一部分更改为:

#boxcard div img.flip{

  transform: rotateY(180deg);

}

此外,删除HTML中的所有内嵌样式。你的整个图片中都有style="display:none;"

看到我放在一起的小提琴here。请注意,教师帽子的图像已被翻转。

如果您希望在混合中添加动画,here's示例了解如何使用transition CSS3属性。

另请注意,classList仅支持现代浏览器。

不情愿的更新

我给你一个clickable example。如果这对您不起作用,那么我建议您更新浏览器以支持转换/转换,或者点击库并开始了解一些JavaScript基础知识。我希望这最后一次推动能够采用某种形式的公认答案......