我想翻转几个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>
答案 0 :(得分:1)
您的CSS和HTML彼此之间没有太大关系。假设您希望card
元素内的图像旋转,请尝试将CSS的最后一部分更改为:
#boxcard div img.flip{
transform: rotateY(180deg);
}
此外,删除HTML中的所有内嵌样式。你的整个图片中都有style="display:none;"
。
看到我放在一起的小提琴here。请注意,教师帽子的图像已被翻转。
如果您希望在混合中添加动画,here's示例了解如何使用transition
CSS3属性。
另请注意,classList仅支持现代浏览器。
不情愿的更新
我给你一个clickable example。如果这对您不起作用,那么我建议您更新浏览器以支持转换/转换,或者点击库并开始了解一些JavaScript基础知识。我希望这最后一次推动能够采用某种形式的公认答案......