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-和其他供应商前缀也展开上述}

vw和vh是视口尺寸。 50vh是视口高度的一半

请注意，放置transform堆栈的顺序非常重要，即：如果将translate3d移动到结尾或转换规则，则可能会产生不需要的结果。

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

1 个答案: