如何使用CSS製作不同的翻轉動畫？

Question

我想使用CSS3製作一個動畫，在3D空間中翻轉元素作爲介紹動畫。谷歌搜索將揭示許多不同的網站解釋如何做翻轉動畫 - 這裏是最好的結果：http://davidwalsh.name/css-flip

但問題是這不是我想要它看起來。所有這些翻轉的翻轉中心都像翻轉中間的旋轉門一樣。

，我想應該開始出像一個敞開的門（不可見的，因爲它是垂直於屏幕）與左側的鉸鏈翻轉動畫 - 然後將門關閉，您將看到緊閉的大門的前面，然後停在那裏。在我的情況下，用戶將點擊一個按鈕，然後這個元素將使用動畫作爲介紹出現。在.flipper-webkit-transform-origin: 0% 50%：

該解決方案應該使用CSS3（JavaScript是也沒關係），並且它是確定只有在Webkit的工作（我會做其他瀏覽器上一些完全不同的動畫）

Answer 1

使用transform-origin。只是看兼容性。 caniuse.com沒有列出transform-origin。記住供應商前綴。