【发布时间】：2020-12-02 09:32:06
【问题描述】：
我需要一些关于引导翻转卡的帮助。我尝试复制从“https://www.w3docs.com/tools/code-editor/3161”中剪下的 Bootstrap 翻转卡，这对我有用。当我将鼠标悬停时它会返回，但我需要将选项作为附加的简单超链接内容，目前它显示为按钮。当您将鼠标悬停在第四张卡片上时，您会看到按钮，但我需要简单的文本超链接
body {
color: #666;
font-weight: normal;
margin: 0;
padding: 0;
background: #eeeeee;
}
h2 {
background: #666;
color: #fff;
text-align: center;
margin: 0 0 5% 0;
padding: 0.5em;
}
.cardBox {
float: left;
font-size: 1.2em;
margin: 1% 0 0 1%;
perspective: 800px;
transition: all 0.4s ease 0s;
width: 20%;
}
.cardBox:hover .card {
transform: rotateY(180deg);
}
.card {
background: #666666;
cursor: pointer;
height: 250px;
transform-style: preserve-3d;
transition: transform 0.5s ease 0s;
width: 100%;
}
.card p {
margin-bottom: 1.8em;
}
.card .front,
.card .back {
backface-visibility: hidden;
box-sizing: border-box;
color: white;
display: block;
font-size: 1.2em;
height: 100%;
padding: 0.8em 0.7em;
position: absolute;
text-align: center;
width: 100%;
}
.card .front strong {
background: #fff;
border-radius: 100%;
color: #222;
font-size: 1.5em;
line-height: 30px;
padding: 0 7px 4px 6px;
}
.card .back {
transform: rotateY( 180deg);
}
.card .back a {
padding: 0.3em 0.5em;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 1px;
font-size: 0.9em;
transition: all 0.2s ease 0s;
}
.card .back a:hover {
background: #fff;
color: #333;
text-shadow: 0 0 1px #333;
}
.cardBox:nth-child(1) .card .back {
background: #ffcc00;
}
.cardBox:nth-child(2) .card .back {
background: #1c87c9;
}
.cardBox:nth-child(3) .card .back {
background: #ff6347;
}
.cardBox:nth-child(4) .card .back {
background: #8ebf42;
}
.cardBox:nth-child(2) .card {
-webkit-animation: giro 1.5s 1;
animation: giro 1.5s 1;
}
.cardBox:nth-child(3) .card {
-webkit-animation: giro 2s 1;
animation: giro 2s 1;
}
.cardBox:nth-child(4) .card {
-webkit-animation: giro 2.5s 1;
animation: giro 2.5s 1;
}
@-webkit-keyframes giro {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
@keyframes giro {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
@media screen and (max-width: 767px) {
.cardBox {
margin-left: 2.8%;
margin-top: 3%;
width: 46%;
}
.card {
height: 285px;
}
.cardBox:last-child {
margin-bottom: 3%;
}
}
@media screen and (max-width: 480px) {
.cardBox {
width: 94.5%;
}
.card {
height: 260px;
}
}<div>
<!DOCTYPE html>
<html>
<body>
<h2>Responsive Flip Cards</h2>
<div class="boxesContainer">
<div class="cardBox">
<div class="card">
<div class="front">
<h3>Card One</h3>
<p>Hover to flip</p>
<strong>↻</strong>
</div>
<div class="back">
<h3>Back Side One</h3>
<p>Content in card one</p>
<a href="www.gmail.com">Button 1</a>
</div>
</div>
</div>
<div class="cardBox">
<div class="card">
<div class="front">
<h3>Card Two</h3>
<p>Hover to flip</p>
<strong>↻</strong>
</div>
<div class="back">
<h3>Back Side Two</h3>
<p>Content in card two</p>
<a href="www.google.com">Button 2</a>
</div>
</div>
</div>
<div class="cardBox">
<div class="card">
<div class="front">
<h3>Card Three</h3>
<p>Hover to flip</p>
<strong>↻</strong>
</div>
<div class="back">
<h3>Back Side Three</h3>
<p>Content in card three</p>
<a href="www.google.com">Button 3</a>
</div>
</div>
</div>
<div class="cardBox">
<div class="card">
<div class="front">
<h3>Card Four</h3>
<p>Hover to flip</p>
<strong>↻</strong>
</div>
<div class="back">
<h3>Back Side Four</h3>
<p>Content in card four</p>
<a href="www.google.com">Button 4</a>
<a href="www.google.com">Button 4</a>
<a href="www.google.com">Button 4</a>
<a href="www.google.com">Button 4</a>
</div>
</div>
</div>
</div>
</body>
</html>
</div>【问题讨论】：
标签： html css bootstrap-4 bootstrap-modal angular-ui-bootstrap