+ 1

Why does this only work the first time?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .scene { width: 200px; height: 260px; perspective: 600px; } #card { width: 100%; height: 100%; text-align: center; font-size: 2em; color: white; background: radial-gradient(cyan, teal); position: relative; backface-visibility: hidden; z-index: 2; border-radius: 5%; } .card { animation: flip .7s linear; animation-fill-mode: forwards; } @keyframes flip{ 0% {transform: translatez(0) rotatey(0);} 50% {transform: translatez(200px) rotatey(-90deg);} 100% {transform: translatez(0) rotatey(-180deg);} } .card3 { animation: flip3 .7s linear; animation-fill-mode: forwards; } @keyframes flip3{ 100% {transform: translatez(0) rotatey(0);} 50% {transform: translatez(200px) rotatey(-90deg);} 0% {transform: translatez(0) rotatey(-180deg);} } #front { position: relative; top: 38%; cursor: default; } #card2 { width: 100%; height: 100%; text-align: center; font-size: 3em; color: white; background: radial-gradient(red, maroon); position: relative; top: -100%; z-index: 1; border-radius: 5%; backface-visibility: hidden; } .card2 { animation: flip2 .7s linear; animation-fill-mode: forwards; } @keyframes flip2{ 0% {transform: translatez(0) rotatey(180deg);} 50% {transform: translatez(200px) rotatey(90deg);} 100% {transform: translatez(0) rotatey(0);} } .card4 { animation: flip4 .7s linear; animation-fill-mode: forwards; } @keyframes flip4{ 100% {transform: translatez(0) rotatey(180deg);} 50% {transform: translatez(200px) rotatey(90deg);} 0% {transform: translatez(0) rotatey(0);} } </style> </head> <body> <div class="scene"> <div id='card' onclick='flip(), flip2()'> </div> <div id='card2' onclick='flip3(), flip4()'> <div id='front'>Contessa</div> </div>

html css javascript animation

6th Sep 2019, 1:27 AM

Joshua Watts

7 Answers

+ 1

I can flip the card forward and back, but not forward again I also just noticed this doesn't contain my JavaScript, oops

6th Sep 2019, 3:25 AM

Joshua Watts

+ 1

Here's the JS :) function flip() { var card = document.getElementById("card"); card.classList.toggle("card"); } function flip2() { var card2 = document.getElementById("card2"); card2.classList.toggle("card2"); } function flip3() { var card3 = document.getElementById("card"); card3.classList.toggle("card3"); } function flip4() { var card4 = document.getElementById("card2"); card4.classList.toggle("card4"); }

6th Sep 2019, 3:29 AM

Joshua Watts

+ 1

Returns didn't work but could you elaborate on the helper function?

6th Sep 2019, 3:00 PM

Joshua Watts

+ 1

flip3 and flip4 call elements with id's "card" and "card2" respectively, but they change the classes to card3 and card4. (essentially undoing what flip and flip2 did to them) So it should work since the id's don't change right? P.S. I realize I could have made it a bit more readable.

6th Sep 2019, 5:10 PM

Joshua Watts

Maybe try (return;) after each of your flip functions? It's only executing your code once so maybe you can make a helper function with a for loop

6th Sep 2019, 11:36 AM

Anthony Johnson