Кросс-браузерная 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>