I needed a card flip effect which is working but the issue is that no matter what I do, the back of card always stays inverted on hover, below is the code for it. The preview of the below code is deployed at agenvise.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;
}
}
Expected the background image to be in the right way but instead its laterally inverted
The issue that both sides are rotating to 180 degrees. The front side is correct—It should start at 0 degrees and then transition to 180 as you have it. But the back side should start at 180 and then transition to 0. Logically, that makes sense since in real life, if you hold a card normally, the front side is rotated 0 degrees because it faces towards you, while the back side is rotated 180 degrees because it's facing away from you.
You could fix this by adding individual hover states for front and back to make the front side rotate from 0 to 180 while the back side rotates from -180 to 0 (negative so that both sides rotate in the same direction).
.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);
}