javascript - CSS 旋转和平移变换给出意想不到的结果

Question

我已经检查了 CSS-TRICKS 和 Google 提供给我的任何其他网站(最多到他们链接列表的第二页)，所以我唯一的假设是我误解了它的工作原理或做错了。

我想要的是让图像从当前位置滑入页面的绝对中心。当它滑动时，我希望它在中心旋转，像一个完美平衡的轮子一样旋转。当它滑动和旋转时，我希望它看起来是朝向用户的。我想在保持图像平坦且不倾斜的同时执行此操作。

它所做的相反是将图像顺时针旋转并向下旋转回到页面左侧并离开页面。

这是我的代码(从 animate.css 借用并根据我的需要进行了更改):

    @-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;
    }

目前，我的代码没有考虑图像的起点，当我有一排图像时，这将是错误的/困惑的。如果他们需要向上滑动到中心，向下滑动到中心等，有没有办法从他们的起始位置动态计算？我很确定这是 JavaScript 或 jQuery 的工作，但我不确定如何编写代码。

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

编辑:这是一个 JSFiddle，显示了代码的运行情况。这是一张动画有小延迟的图像，因此您可以看到图像，然后观察它的动画效果以了解我的问题。我很抱歉没有早点提供这个。

JSFiddle

Answer 1

当然可以:

FireFox Live example

@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;
}

^{P.S: 也为 -webkit- 和其他 vendor 前缀扩展上面的内容}

vw 和 vh 是Viewport 大小。 50vh 是视口(viewport)高度的一半

请注意，transform 堆栈的放置顺序非常重要，即:如果将 translate3d 或 transform 规则移到最后，您可能会得到不需要的结果。