0
아래 이미지를 참조하십시오. 다른 콘텐츠합니다 ('카드'의 '뒤로'.)서로 인접한 DIV를 배열하고 CSS로 각각 뒤집기
아래 관련 코드를 공개, 그것을 플립해야 DIV 위로 마우스를
, 나는
로 관리했습니다- 색깔이
DIV인 것으로 표시되지만 흰색과 같이 인접하지는 않습니다. 각DIV의 중심으로부터되어야 동안 - 각
DIV의을 시작하는 에서 플립 애니메이션을 얻는다.
플립 애니메이션의 경우 자원이 this입니다. DIV 게재 위치의 경우 다른 사람들과 마찬가지로 this SO post을 사용했습니다.
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;
}
사람의 모양과 I가 제시 한 내용을 완료하는 데 도움이 할 수있는 경우 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()
이 크게 감사
<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 HTML
[이 웹 사이트] (https://www.myrbetriq.com/cost-savings-and-support/)에는 배울 때 사용할 수있는 플립 카드 레이아웃이 있습니다. – James
@James, 내가 뭘 찾고있어, 고마워! 이 질문에 곧 답변 할 것입니다 ... –