HTML&CSS：3D卡片翻转悬停效果
body {
background-image: linear-gradient(to bottom right,
#91defe,
#99c0f9,
#bdb6ec,
#d7b3e3,
#efb3d5,
#f9bccc);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.flip {
box-shadow: 0 0 10px rgba(128, 128, 128, 0.5);
padding: 1em;
width: 190px;
height: 254px;
transform-style: preserve-3d;
transition: 3s ease;
}
.flip:hover {
transform: rotateY(180deg);
}
.flip .content {
transform-style: preserve-3d;
}
.flip .back,
.flip .front {
transform-style: preserve-3d;
backface-visibility: hidden;
display: flex;
flex-direction: column;
}
.flip .back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.flip h2,
.flip p {
transform: translateZ(90px);
text-shadow: 0 0 3px black;
text-align: center;
}
.flip h2 {
font-size: 3em;
color: #fff;
letter-spacing: 1px;
}
.flip p {
font-size: 1em;
color: #eee;
line-height: 1.6em;
}
.flip::before,
.flip::after {
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-image: linear-gradient(purple, red);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: rotateY(180deg)translateZ(1px);
}
.flip::before {
transform: none;
background-image: linear-gradient(violet, orange);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}