Question

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

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

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

将jquery旋转动画直接应用于固定轴上的图像，以模拟摆动效果

1 个答案: