在固定軸上直接在圖像上應用jquery旋轉動畫來模擬擺動效果

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

位靜止（默認）不變形