如何使用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。记住供应商前缀。