我想翻转几个 DIV 元素。为此，我使用了下面的代码。问题是 DIV 元素没有旋转(转换)。有人可以告诉我问题出在哪里吗？问候。我想翻转“卡片”div。
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>
最佳答案
您的 CSS 和 HTML 彼此关系不大。假设您希望 card 元素内的图像旋转，请尝试将 CSS 的最后一部分更改为:
#boxcard div img.flip{
transform: rotateY(180deg);
}
此外，删除 HTML 中的所有内联 样式。您的图像中充满了 style="display:none;"。
看我拼凑的 fiddle here .请注意，教师帽子的图像已翻转。
如果您想将动画添加到组合中，here's如何使用 transition CSS3 属性的示例。
另外，请注意 classList仅在现代浏览器中受支持。
勉强更新
我给你一个clickable example .如果这对您不起作用，那么我会建议更新您的浏览器以支持转换/转换，或者访问库并开始复习一些 JavaScript 基础知识。我希望这最后的插入能得到某种形式的公认答案...
关于javascript - CSS3 转换不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24364874/