直接在图像上应用固定轴上的jquery旋转动画来模拟摆动效果答案

【问题标题】：Apply jquery rotation animation on fixed axis directly on image to simulate swinging effect直接在图像上应用固定轴上的jquery旋转动画来模拟摆动效果
【发布时间】：2014-02-26 06:11:01
【问题描述】：

我的网站中有某些图像绝对位于父容器中，并且由于该网站可以根据我的需要进行响应式工作，因此我不想将图像包含在固定宽度的 div 或任何内容中。这些图像基本上是附加到字符串的对象，我将其定位为好像它们悬挂在页面上一样。现在我正在尝试以某种方式对它们进行动画处理，以创建类似钟摆的摆动效果 - 就好像它们挂在一根线上一样。我看过一些关于类似效果的文章，this one 似乎最有希望，但我无法应用它可能是因为它需要图像在一个 div 中。 Here is the jsbin 我正在尝试。我将从直接对图像应用旋转开始，然后继续创建正确的动画。不幸的是，我被困在第一步。

【问题讨论】：

标签： jquery jquery-animate css-transforms

【解决方案1】：

您只需将位置设置为相对

#plane {
    margin-left:100px;
    -webkit-transform-origin: top;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    position: relative;
}

位置静态（默认）不是可转换的

【讨论】：