html Bootstrap 4翻转卡片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Bootstrap 4翻转卡片相关的知识，希望对你有一定的参考价值。
h1,h3{color:#fff;text-align:center}.text-white .card-img{-webkit-filter:brightness(75%) saturate(50%);filter:brightness(75%) saturate(50%)}.card-flip .card:last-of-type{-webkit-transform:rotateY(180deg)}.card-flip:hover .card:first-of-type{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.card-flip:hover .card:last-of-type{-webkit-transform:rotateY(0);transform:rotateY(0)}h1,h2,h3,h4{font-family:Barrio,cursive}.card-title{max-width:100%;font-size:4vw}.card-img,.card-img-bottom,.card-img-top{min-width:100%;height:38vh;min-height:38vh}.card-flip{background:0 0;border:none;padding:0}.card-flip .card{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s;transition-timing-function:linear;width:100%;height:100%;margin:0}.card-flip .card:first-of-type{tranform:rotateY(0)}.card-flip .card:last-of-type{transform:rotateY(180deg);position:absolute;top:0;display:flex}body{background-color:#333}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
</head>
<body><div class="container-fluid">
<h1>Responsive Flipping Cards Bootstrap 4</h1>
<h3>Great for Galleries and Products</h3>
<div class="-card-deck card-columns">
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img img-fluid" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
<figure class="card card-flip">
<div class="card bg-dark text-white">
<img class="card-img" src="https://via.placeholder.com/100x38vh" alt="">
<div class="card-img-overlay d-flex justify-content-center align-items-center">
<h4 class="card-title display-1">100 x 38</h4>
</div>
</div>
<div class="card text-white bg-primary">
<div class="card-body d-flex justify-content-center align-items-center">
<p class="card-text">Description.</p>
</div>
</div>
</figure>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>以上是关于html Bootstrap 4翻转卡片的主要内容，如果未能解决你的问题，请参考以下文章