CSS旋转和平移转换会产生意想不到的结果

CSS rotate and translate transform give unexpected results

本文关键字：意想不到 结果 转换 旋转 CSS      更新时间：2023-09-26

我已经查看了CSS-TRICKS和谷歌提供给我的任何其他网站的链接列表的第二页，所以我唯一的假设是我误解了这是如何工作的，或者做错了。

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

它所做的而是顺时针旋转图像，向下朝页面左侧旋转，然后离开页面。

这是我的代码（从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

当然可以：

FireFox Live示例

@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是Viewport的大小。50vh是视口高度的一半

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

相关文章：