0
下の画像を参照してください。異なるコンテンツ（「カード」の「裏」。）DIVを互いに隣接して配置し、CSSでそれぞれを反転させてください。
下記の関連するコードとを明らかにし、それを反転する必要がありDIVの上にマウスを移動
、私は
に管理してきました- 白のように、隣接していないが、色は
DIVで示されている配列を得る。 - 各
DIVの中央からでなければなりませんが、各DIVのを開始からフリップアニメーションを取得します。
フリップアニメーションでは、thisリソースを使用しました。 DIVのプレースメントについては、特にthis SO postを使用しました。
Relevant 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>
Relevant 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;
}
Relevant 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()
誰かが中に見て、私が出て設定したものを完了することができた場合に大幅に感謝しています。今はいつか立ち往生しました。事前に多くの感謝！
[このウェブサイト]（https://www.myrbetriq.com/cost-savings-and-support/）には、似たようなフリップカードレイアウトがあり、それを使って覚えているかもしれません。 – James
@James、私が探しているもの、ありがとう！すぐにこの質問に直接答える... –