请看下图。
将鼠标悬停在 DIV 上应该翻转它，显示不同的内容(“卡片”的“背面”。)
通过下面的相关代码，我成功地做到了
- 获取彩色
DIV显示的排列，但彼此不相邻，如白色。 - 从每个
DIV的开始获取翻转动画，同时应该从每个DIV的中心获取翻转动画>.
对于翻转动画，我使用了this资源。对于 DIV 位置，我使用了 this SO post 等。 .
相关的 HTML
<html>
<head>
<title>My Website</title>
<script src="my.js"></script>
<script src="jq_js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bs/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/my.css">
<link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Lobster Two' rel='stylesheet'>
<script src="bs/js/bootstrap.min.js"></script>
</head>
<body onload = "javascript: isLoggedIn();">
<div class="container">
:
:
:
:
<div id="results">
</div>
</div>
</body>
</html>
相关CSS
/* Dealet Card */
.dealet-container
{
/*display: inline-flex; */
perspective: 1000px;
}
.dealet-container, .front, .back
{
width: 200px;
height: 170px;
}
.dealet
{
/*width: 18%;*/
margin-left: 14px;
float: left;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
display: table-cell;
flex-flow: row wrap;
transition: 0.9s;
}
.dealet:hover
{
background-color: lightblue;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
/* transform: rotateY(180deg);
*/}
.dealet-container:hover .flipper, .dealet-container.hover .flipper
{
transform: rotateY(180deg);
}
.flipper
{
transition: 0.9s;
transform-style: preserve-3d;
position: relative;
}
.front
{
z-index: 2;
transform:rotateY(0deg);
}
.back
{
transform:rotateY(180deg);
}
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.dealet_box
{
padding: 6px 6px;
}
.dealet_img
{
width: 100%;
}
.dealet_logo
{
width: 60%;
}
.dTop
{
font-family: 'Lobster';
font-size: 16px;
}
.dBot
{
font-family: 'Lobster Two';
font-size: 14px;
}
相关的 JavaScript/JQuery
function drawCard(myArray)
{
var resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = "";
var html = [""];
$.each(myArray, function(cardNum, value)
{
dealet = myArray[cardNum].dealet;
dealetID = "dealet" + cardNum;
dTopID = "dTop" + cardNum;
dBotID = "dBot" + cardNum;
logo = myArray[cardNum].logo;
addr = myArray[cardNum].address;
mob = myArray[cardNum].mobile;
// Card front
htmlFString = [ '<div class="dealet-container">',
'<div class="flipper">',
'<div class="dealet front" id=f' + cardNum + '>',
'<img id="' + dealetID + '" src="' + dealet + '" class="dealet_img">',
'<div class="dealet_box">',
'<span class="dTop" id="' + dTopID + '">' + myArray[cardNum].name_top + '</span><br>',
'<span class="dBot" id="' + dBotID + '">' + myArray[cardNum].name_bottom + '</span>',
'</div>',
'</div>'
].join('');
// Card back
htmlBString = [ '<div class="dealet back" id=b' + cardNum + '>',
'<img src="' + logo + '" class="dealet_logo" align="center">',
'<div class="dealet_box">',
'<span>' + addr + '</span><br>',
'<span>' + mob + '</span>',
'</div>',
'</div>',
'</div>',
'</div>'
].join('');
html += htmlFString;
html += htmlBString;
});
resultsDiv.innerHTML = html;
} // of drawCard()
如果有人可以查看并帮助完成我的计划，我将不胜感激。现在被困了一段时间。非常感谢!
最佳答案
呸!终于得到了想要的结果。
要将 DIV 彼此相邻放置，这是可行的样式。 display 和 flex-flow 元素解决了这个问题。
/* Dealet Card */
.dealet-container
{
display: inline-table;
perspective: 1000px;
}
.dealet
{
margin: 14px;
float: left;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
display: table-cell;
flex-flow: row wrap;
transition: 0.6s;
}
对于翻转动画，“卡片”的“背面”的 z-index 是关键。这是有效的(引用:CSS Layout: The Position Property):
.back
{
transform:rotateY(180deg);
position: absolute;
z-index: -1;
}
希望对大家有所帮助。感谢所有看过的人!
关于javascript - 将 DIV 彼此相邻排列并使用 CSS 翻转它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42889489/