Javascript CSS旋转和平移变换会产生意外的结果

我已经检查过CSS-TRICKS和谷歌提供给我的任何其他网站的链接列表的第二页，所以我唯一的假设是我误解了它的工作原理或者做得不对

我想要的是图像从当前位置滑入页面的绝对中心。当它滑动时，我希望它在中心旋转，像一个完全平衡的轮子一样旋转。当它滑动和旋转时，我希望它看起来像是朝向用户。我想这样做的同时仍然保持图像平面和不倾斜

相反，它所做的是顺时针旋转图像，然后向下旋转图像，使其回到页面左侧并离开页面

以下是我的代码（从animate.css中借用，并根据我的需要进行了更改）：

目前，我的代码没有考虑图像的起始点，当我有一行图像时，这将是错误的/混乱的。如果他们需要向上滑动到中心、向下滑动到中心等，是否有一种方法可以从他们的起始位置动态显示图形？我很确定这是JavaScript或jQuery的工作，但我不确定如何编写代码

我只是对动画功能期望过高吗？由于复杂性，我是否应该简化我的设计以不这样做

编辑：下面是一个JSFIDLE，显示了正在运行的代码。这是一个对动画有一点延迟的图像，因此您可以看到该图像，然后观察它如何设置动画以查看我的问题。我很抱歉没有早点提供

你一定能做到：

注意：对于

-webkit-

和其他供应商前缀，也扩展上述内容

vw

和

vh

是视口大小<代码>50vh是视口高度的一半

---

请注意，放置

转换堆栈的顺序非常重要，即：如果将translate3d移到末尾或转换规则，则可能会得到不需要的结果。
请提供一把小提琴或一支笔，其中包括HTML。我已在小提琴中添加了所需的代码，并更新了帖子以反映这一点。很抱歉没有早点把它包括进来！我希望有人能帮忙。当我把两个“忍者”并排放在一起时，我注意到一个问题。我的忍者是可点击的。当你帮我完成任务时，你点击它们，它们旋转并消失。当我点击ninja1时，它会向用户正确地旋转和淡出，ninja2会滑到ninja1刚刚坐过的地方。同样，ninja1也不会一直“消失”。它弹回到原来的位置，把ninja2推回到它应该呆的地方。知道这里出了什么问题吗？我已经编辑了我上面的提琴，将我的代码和你的代码结合在一起，使两个忍者可以点击。但是，我不知道为什么忍者在点击时不会旋转。不过，他们在我的测试页面上工作。这是测试结果。
    @-webkit-keyframes rotOutZm {
    0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
    }

    100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
    transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
    opacity: 0;
    }
    }

    @keyframes rotOutZm {
    0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
    }

    100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
    transform: rotate3d(0, 0, 1, 90deg) scale3d(3, 3, 3) translate3d(100% ,100% ,0);
    opacity: 0;
    }
    }

    .rotOutZm {
    -webkit-animation-name: rotOutZm;
    animation-name: rotOutZm;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    }

@keyframes rotOutZm {
  100% {
    margin: -50px; /* image is 100x100px size so... */
    transform: translate3d(50vw, 50vh, 0) scale(3) rotate(360deg);
    opacity: 0;
  }
}

.rotOutZm {
  transform-origin: center;
  animation: rotOutZm 2s forwards 0.5s;
}