Cross-Browser 3D Animation

Question

I'm currently trying to develop a small browser-based game. I've been fiddling around quite a bit with getting an animation to work the way I want it to.

The problem is that it works alright in Opera, quite well in Edge (although it crops the circle a bit). However, as always, IE fails quite a bit.

The example doesn't show the function perfectly, even though it normally works in my browser (Opera).

The card should flip from its absolute position, expand to 90% height AND move to complete center of the screen. There will be more cards with absolute positions and therefore it would be ideal to only have one "move" animation to center.

Thank you

 $(document).ready(function() { $(document).on("click", ".card", function() { $(this).addClass("flipover"); $(this).removeClass('hover'); }); //if (window.document.documentMode) { alert("Use another browser!"); } });

 html, body { perspective: 1000px; height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; } .card { position: absolute; width: 10vh; height: 10vh; border-radius: 50%; perspective: 1000px; transform-style: preserve-3d; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardfront, .cardback { position: absolute; left: 0; top: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; border-radius: 50%; } .cardfront { transform: rotateY(0deg); background: red; } .cardback { transform: rotateY(180deg); background: blue; } .hover:hover { transform: rotate3d(1, 1, 0, 45deg); transition: all 0.3s ease-in-out 0s; } .flipover { position: absolute !important; height: 90vh; width: 90vh; top: 50%; left: 50%; transform: rotateY(180deg); margin-left: -45vh; margin-top: -45vh; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .pos1r { top: 50%; margin-top: -5vh; left: 50vh; } .pos2r { top: 35vh; left: 35vh; } .pos3r { top: 55vh; left: 35vh; }

 <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <div class="card pos1r hover"> <div class="cardfront"> </div> <div class="cardback"> </div> </div>

https://jsfiddle.net/dumo6r04/

Answer 1

I'm not sure if this is more or less what you were attempting to do - I applied the transform-origin and used translate3D to help move the card centrally.

 $( document ).ready(function() { $(document).on("click", ".card", function() { $(this).addClass("flipover"); $(this).removeClass('hover'); }); });

 html, body { perspective: 1000px; height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; } .card { position: absolute; width: 10vh; height: 10vh; border-radius: 50%; perspective: 1000px; transform-style: preserve-3d; transform-origin:center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .cardfront, .cardback { position: absolute; left: 0; top: 0; width: 100%; height: 100%; backface-visibility: hidden; transition: 0.6s; transform-style: preserve-3d; border-radius: 50%; transform-origin:center; } .cardfront { transform: rotateY(0deg); background: red; } .cardback { transform: rotateY(180deg); background: blue; } .hover:hover { transform: rotate3d(1, 1, 0, 45deg); transition: all 0.3s ease-in-out 0s; } .flipover { position: absolute !important; height: 90vh; width: 90vh; top: 50%; left: 50%; transform: rotateY(180deg) translate3D(-35%,-45%,0); margin-left: -45vh; margin-top: -45vh; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .pos1r { top: 50%; margin-top: -5vh; left: 50vh; } .pos2r { top: 35vh; left: 35vh; } .pos3r { top: 55vh; left: 35vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card pos1r hover"> <div class="cardfront"></div> <div class="cardback"></div> </div>