我需要一个有效的卡片翻转效果，但问题是，无论我做什么，卡片背面在悬停时总是保持反转，下面是它的代码。以下代码的预览部署在agevise.in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Agenvise.in</title>
</head>
<body>
<div class="container">
<div class="card">
<div class="side front"></div>
<div class="side back">
<button class="btn">Click me</button>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.container{
position: relative;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
perspective: 1000px;
}
.container::before{
content: "";
position: absolute;
width: 105%;
height: 105%;
background: url(images/Dark\ Blue\ and\ Beige\ Simple\ Dark\ Consultancy\ Portfolio\ &\ Resume\ Website\ \(1\).png) center/cover no-repeat;
filter: blur(5px); /* Adjust the blur value as needed */
z-index: -1;
}
.card{
/* filter: brightness(100%) !important ; */
/* width: auto;
max-width: 50vw; */
padding: 0;
position: relative;
color: #fff;
text-align: center;
/* padding: 50px 35px; */
/* border: 1px solid rgba(0, 0, 0, 0.3); */
/* background: rgba(0, 0, 0, 0.2); */
border-radius:16px ;
/* box-shadow: 0 4px 30px rgba(0,0,0,0.1); */
backdrop-filter:blur(5px) ;
transition: transform 1s;
transform-style: preserve-3d;
}
.card {
position: relative;
margin: 0 auto;
border-radius: 15px;
perspective: 1000px;
}
.card .side {
position: absolute;
width: 100%;
height: 100%;
border-radius: 15px;
transition: transform 0.6s;
}
.card .front {
background: url(images/FRONT.png) no-repeat center center;
background-size: cover;
backface-visibility: hidden;
/* z-index: 1; */
transform: rotateY(0deg);
}
.card:hover .side {
transform: rotateY(180deg);
}
.card .back {
background: url(images/a_dark_background_with_a_computer_and_a_.png) no-repeat center center;
z-index: -1;
}
.card img{
/* margin: 0; */
height: 100%;
width: 100%;
border-radius: 16px;
}
.card h2{
font-size: 40px;
font-weight: 600;
margin-top: 20px;
}
.card p{
font-size: 18px;
margin: 10px auto;
max-width: 330px;
}
.card .links img{
width: 40px;
border-radius: 50%;
margin: 10px 5px;
transition: background 0.5s;
}
.card .links img:hover{
background: #ff01cf;
}
.btn{
text-decoration: none;
display: inline-block;
font-size: 18px;
font-weight: 500;
background: #fff;
color: #ff01cf;
padding: 10px 30px;
border-radius: 30px;
margin: 30px 0 10px;
}
@media screen and (max-width: 600px) {
.container{
flex-direction: column;
}
.card{
width: 80vw;
height: calc(80vw/1.57);
}
.card h2{
font-size: 30px;
}
.card p{
font-size: 16px;
}
.btn{
font-size: 16px;
padding: 8px 24px;
}
}
@media screen and (max-width: 10234px) {
.container{
flex-direction: column;
}
.card{
width: 50vw;
height: calc(50vw/1.57);
}
.card h2{
font-size: 30px;
}
.card p{
font-size: 16px;
}
.btn{
font-size: 16px;
padding: 8px 24px;
}
}
@media screen and (max-width: 768px) {
.container{
flex-direction: column;
}
.card{
width: 80vw;
height: calc(80vw/1.57);
}
.card h2{
font-size: 34px;
}
.card p{
font-size: 18px;
}
.btn{
font-size: 18px;
padding: 10px 26px;
}
}
预计背景图像是正确的，但它是横向倒置的
双方旋转180度的问题。正面是正确的 — 它应该从 0 度开始，然后过渡到 180 度。但后侧应该从180开始，然后过渡到0。从逻辑上讲，这是有道理的，因为在现实生活中，如果您正常拿着一张卡片，正面会旋转 0 度，因为它面向您，而背面会旋转 180 度，因为它背对您。
您可以通过为正面和背面添加单独的悬停状态来解决此问题，使正面从 0 旋转到 180，而背面从 -180 旋转到 0（负值，以便两侧沿相同方向旋转）。
.card .front {
background: url(images/FRONT.png) no-repeat center center;
background-size: cover;
backface-visibility: hidden;
/* z-index: 1; */
transform: rotateY(0deg);
}
.card .back {
background: url(images/a_dark_background_with_a_computer_and_a_.png) no-repeat center center;
z-index: -1;
transform: rotateY(-180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(0deg);
}