I am not able to get the proper flip animation when I hover. I am not sure where I made mistake

Question

https://sololearn.com/compiler-playground/WfN38j6E031P/?ref=app

And I need the output only using keyframes

Answer 1

susi

.card{...} should have position:relative, it is the container of .front and .back

.card div{...} should have position:absolute, it is the same thing as .front, .back{...} in this use case.

.card {
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
}

.card div {
width: 100%;
height: 100%;
position:absolute;
transition: transform 0.5s;
}

Answer 2

hover the parent div.
transform the child divs.
use transition for animation.
like this:

https://sololearn.com/compiler-playground/Wle76EfEsu6q/?ref=app

Answer 3

Bob_Li why do we need such a high z-index ? And is it not possible to use only the @keyframe ?

Answer 4

you can use z-index of 1.
I just use 10 in case I need to insert something in between
The problem with using animation is you need to synchronize two animations. It feels like extra work to me. I will try it and post one if I can get it to work.

Answer 5

Bob_Li thank you so much

Answer 6

Bob_Li I am using grid layout but I am not getting the output correctly
https://sololearn.com/compiler-playground/W3lo50qj5E2w/?ref=app

Answer 7

susi
you can even get rid of
.front,
.back{
.....
}

and merge it to .card div{...}

.card div {
width: 100%;
height: 100%;
position:absolute;
transition: transform 0.5s;
display: grid;
place-items: center;
color: white;
font-weight: 800;
backface-visibility: hidden;
}

Answer 8

# दो नंबरों को जोड़ने के लिए उपयोगकर्ता से इनपुट लें
num1 = float(input("पहला नंबर दर्ज करें: "))
num2 = float(input("दूसरा नंबर दर्ज करें: "))

# दो नंबरों को जोड़ें
result = num1 + num2

# नया नंबर को प्रिंट करें
print(f"{num1} + {num2} = {result}")