javascript - 跨浏览器 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 来帮助移动 >卡集中。

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