Javascript，jquery或css3旋轉字母動畫

Question

我是新的JavaScript和尤其是在動畫。我面臨的挑戰是將信件從側面來回旋轉最多30度。我上傳的圖片是動畫的一個例子，信件會從右上角或從銷釘移動，但我認爲這很難。 我需要一些指導，如果任何人都可以幫助請回復。 在此先感謝

，因爲我是新的，我不能那麼這裏發表圖片是鏈接：http://i.stack.imgur.com/byzUC.png

Answer 1

好了，這花了更長的時間比我願意承認，並且僅在（從我自己有限的可靠測試）Ubuntu 11.04上的Chromium 12+和Firefox 5+（它的確在不是在Opera 11中工作）。在這種情況下，我只會展示Firefox和Chromium的摘錄，儘管鏈接的JS Fiddle有供應商前綴至少可以試用Opera（即使它失敗了）。使用下面的加價：

<img src="http://i.stack.imgur.com/byzUC.png" id="envelope" /> 

下面的CSS產生（無限）振盪信封給你調整你的喜好：

#envelope { 
-webkit-animation-name: oscillate; 
-webkit-animation-duration: 10s; 
-webkit-animation-iteration-count: 10; 
-webkit-animation-direction: infinite; 
-moz-animation-name: oscillate; 
-moz-animation-duration: 10s; 
-moz-animation-iteration-count: 10; 
-moz-animation-direction: infinite; 
} 

@-webkit-keyframes oscillate { 
    0% { 
    -webkit-transform: rotate(0deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
    33% { 
    -webkit-transform: rotate(15deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
    100% { 
    -webkit-transform: rotate(-20deg); 
    -webkit-transform-origin: 108px 23px; 
    } 
} 

@-moz-keyframes oscillate { 
    0% { 
    -moz-transform: rotate(0deg); 
    -moz-transform-origin: 110px 26px; 
    } 
    33% { 
    -moz-transform: rotate(15deg); 
    -moz-transform-origin: 110px 26px; 
    } 
    100% { 
    -moz-transform: rotate(-20deg); 
    -moz-transform-origin: 110px 26px; 
    } 
} 

JS Fiddle demo。 （雖然它在Opera 11中無法使用，我只能想象它在IE中什麼都不能實現......）我強烈建議使用動畫的gif純粹的簡單性和跨瀏覽器的合規性。