<分区>
如您在 this codepen 中看到的那样，我在卡片上有一个 fip 动画。 .我希望当您按下查看详细信息按钮时，卡片会旋转 180 度。 ¿是否可以仅使用 html 和 css 而不使用 javascritp 来获取它？
我的 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Card Flipped</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- App css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!-- Begin page -->
<div class="wrapper">
<div class="row">
<div class="col-md-6 col-lg-3">
<!-- Simple card -->
<div class="flip-container" >
<div class="flipper">
<div class="front">
<!-- front content -->
<div class="card d-block">
<img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8MjPXuGsKGugRrvrD9YQtR_nZD6Ka4Q_7ZpyzJV2TEPtfadpP" alt="Card image cap" height="180" weight="80">
<div class="card-body">
<h5 class="card-title">Introduction to particle physics</h5>
<p class="card-text">Some quick example text to build on the card title and make
up the bulk of the card's content. Some quick example text to build on the card title and make up.</p>
<a href="javascript: void(0);" class="btn btn-primary">Buy</a>
<a href="javascript: void(0);" class="btn btn-primary view-details">View Details</a>
</div> <!-- end card-body-->
</div> <!-- end card-->
</div>
<div class="back">
<h1>Do you like it?</h2><!-- back content -->
</div>
</div>
</div>
</div>
<!-- END wrapper -->
<script src="assets/js/app.min.js"></script>
</body>
</html>
我的CSS代码:
/* flip the pane when hovered */
.btn-primary { background: red;}
.flip-container:hover .flipper{
transform: rotateY(180deg);
}
/*
.view-details:hover .flipper, .view-details.hover .flipper {
transform: rotateY(180deg);
}
*/
.flip-container, .front, .back { /*Attention*/
width: 280px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
我最近放了a similar post ，但不同之处在于，动画是在悬停在名为“查看详细信息”的按钮上时发生的。