css3悬停卡片3D翻转动画特效

css3卡片和文字翻转切换效果，制作悬停卡片3D翻转特效。

<style>    
*, *:before, *:after {    
box-sizing: border-box;    
}    
html {    
font-size: 18px;    
line-height: 1.5;    
font-weight: 300;    
color: #333;    
font-family: "Nunito Sans", sans-serif;    
}    
body {    
margin: 0;    
padding: 0;    
height: 100vh;    
background-color: #ecf0f9;    
background-attachment: fixed;    
}    
.content {    
display: flex;    
margin: 0 auto;    
justify-content: center;    
align-items: center;    
flex-wrap: wrap;    
max-width: 1000px;    
}    
.heading {    
width: 100%;    
margin-left: 1rem;    
font-weight: 900;    
font-size: 1.618rem;    
text-transform: uppercase;    
letter-spacing: .1ch;    
line-height: 1;    
padding-bottom: .5em;    
margin-bottom: 1rem;    
position: relative;    
}    
.heading:after {    
display: block;    
content: '';    
position: absolute;    
width: 60px;    
height: 4px;    
background: linear-gradient(135deg, #1a9be6, #1a57e6);    
bottom: 0;    
}    
.description {    
width: 100%;    
margin-top: 0;    
margin-left: 1rem;    
margin-bottom: 3rem;    
}    
.card {    
color: inherit;    
cursor: pointer;    
width: calc(33% - 2rem);    
min-width: calc(33% - 2rem);    
height: 400px;    
min-height: 400px;    
perspective: 1000px;    
margin: 1rem;    
position: relative;    
}    
@media screen and (max-width: 800px) {    
.card {    
width: calc(50% - 2rem);    
}    
}    
@media screen and (max-width: 500px) {    
.card {    
width: 100%;    
}    
}    
.front,    
.back {    
display: flex;    
border-radius: 6px;    
background-position: center;    
background-size: cover;    
text-align: center;    
justify-content: center;    
align-items: center;    
position: absolute;    
height: 100%;    
width: 100%;    
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;    
transform-style: preserve-3d;    
transition: ease-in-out 600ms;    
}    
.front {    
background-size: cover;    
padding: 2rem;    
font-size: 1.618rem;    
font-weight: 600;    
color: #fff;    
overflow: hidden;    
font-family: Poppins, sans-serif;    
}    
.front:before {    
position: absolute;    
display: block;    
content: '';    
top: 0;    
left: 0;    
right: 0;    
bottom: 0;    
background: linear-gradient(135deg, #1a9be6, #1a57e6);    
opacity: .25;    
z-index: -1;    
}    
.card:hover .front {    
transform: rotateY(180deg);    
}    
.card:nth-child(even):hover .front {    
transform: rotateY(-180deg);    
}    
.back {    
background: #fff;    
transform: rotateY(-180deg);    
padding: 0 2em;    
}    
.card:hover .back {    
transform: rotateY(0deg);    
}    
.card:nth-child(even) .back {    
transform: rotateY(180deg);    
}    
.card:nth-child(even):hover .back {    
transform: rotateY(0deg);    
}    
.button {    
transform: translateZ(40px);    
cursor: pointer;    
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;    
font-weight: bold;    
color: #fff;    
padding: .5em 1em;    
border-radius: 100px;    
font: inherit;    
background: linear-gradient(135deg, #1a9be6, #1a57e6);    
border: none;    
position: relative;    
transform-style: preserve-3d;    
transition: 300ms ease;    
}    
.button:before {    
transition: 300ms ease;    
position: absolute;    
display: block;    
content: '';    
transform: translateZ(-40px);    
-webkit-backface-visibility: hidden;    
backface-visibility: hidden;    
height: calc(100% - 20px);    
width: calc(100% - 20px);    
border-radius: 100px;    
left: 10px;    
top: 16px;    
box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);    
background-color: rgba(26, 87, 230, 0.25);    
}    
.button:hover {    
transform: translateZ(55px);    
}    
.button:hover:before {    
transform: translateZ(-55px);    
}    
.button:active {    
transform: translateZ(20px);    
}    
.button:active:before {    
transform: translateZ(-20px);    
top: 12px;    
}    
</style>    
    
<div class="content">    
<h1 class="heading">Card Flip</h1>    
<p class="description">Hover over a card to flip it.</p><a class="card" href="#!">    
<div class="front" style="background-image: url(https://www.uxqr.com/background.php?664);">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a><a class="card" href="#!">    
<div class="front" style="background-image: url('https://www.uxqr.com/background.php?665');">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a><a class="card" href="#!">    
<div class="front" style="background-image: url('https://www.uxqr.com/background.php?666');">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a><a class="card" href="#!">    
<div class="front" style="background-image: url('https://www.uxqr.com/background.php?667');">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a><a class="card" href="#!">    
<div class="front" style="background-image: url('https://www.uxqr.com/background.php?668');">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a><a class="card" href="#!">    
<div class="front" style="background-image: url('https://www.uxqr.com/background.php?669');">    
<p>Lorem ipsum dolor sit amet consectetur adipisi.</p>    
</div>    
<div class="back">    
<div>    
<p>Consectetur adipisicing elit. Possimus, praesentium?</p>    
<p>Provident consectetur natus voluptatem quis tenetur sed beatae eius sint.</p>    
<button class="button">Click Here</button>    
</div>    
</div></a>    
</div>

演示页可能会出现问题，但是保存到本地是没有问题的，把背景图片路径换一下就好了