跨浏览器 3D 动画

Question

我目前正在尝试开发一个基于浏览器的小型游戏。 我一直在摆弄让动画按照我想要的方式工作。

问题是它在 Opera 中运行良好，在 Edge 中运行良好（尽管它对圆圈进行了一些裁剪）。 然而，与往常一样，IE 失败了很多。

该示例并未完美显示该功能，即使它通常可以在我的浏览器 (Opera) 中运行。

卡片应该从它的绝对位置翻转，扩展到90%高度并移动到屏幕的完整中心。 将会有更多具有绝对位置的卡片，因此最好只有一个“移动”动画到中心。

谢谢

 $(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

我不确定这是否或多或少是您尝试做的 - 我应用了transform-origin并使用translate3D来帮助集中移动card 。

 $( 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>