自举4图像卡翻转点击
自举4图像卡翻转点击
提问于 2019-10-29 12:58:28
我不知道如何使它，这样，在点击，一个图像将翻转和信息可以读取在背面的卡片。我尝试添加的每个代码示例都无法工作。这是我的名片：
<div class="card bg-dark text-white">
<img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>我有一套以上的卡片，并希望每一次点击时翻转。我已经将各种定制的CSS应用于.card类。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-10-29 13:11:33
我已经对w3schools上的CSS进行了调整，以便与您的HTML一起工作。我确实需要在类card-inner中添加一个div，因为否则就会出现问题。
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card
.card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card img, .card-img-overlay {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
top:0;left:0;right:0;
}
.card-img-overlay {
transform: rotateY(180deg);
background:blue;
color:white;
}<div class="card bg-dark text-white">
<div class="card-inner">
<img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
点击
// Get card element
const card = document.querySelectorAll('.card');
// Loop through cards.
// This is so you can have multiple cards on a page.
for (let i = 0; i < card.length; i++) {
// Add a click event listener to each card.
card[i].addEventListener("click", function() {
// Toggle active class on card
card[i].classList.toggle("active");
});
}.card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card.active .card-inner {
transform: rotateY(180deg);
}
.card img, .card-img-overlay {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
top:0;left:0;right:0;
}
.card-img-overlay {
transform: rotateY(180deg);
background:blue;
color:white;
}<div class="card bg-dark text-white">
<div class="card-inner">
<img src="https://via.placeholder.com/1000x300" class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-10-31 09:23:52
您可以使用以下代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.scene {
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
var card = document.querySelector('.card');
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58607940
复制相关文章
相似问题
腾讯云开发者
