如何使用CSS制作不同的翻转动画？

Question

我想使用CSS3制作动画，将3D空间中的元素翻转为简介动画。谷歌搜索将揭示许多不同的网站，解释如何进行翻转动画 - 这是最佳结果：http://davidwalsh.name/css-flip

但问题是这不是我想要的样子。所有这些翻转都是翻转中心，就像旋转门铰接在中间一样。

我想要的翻转动画应该像一扇敞开的门（不可见，因为它垂直于屏幕），左边是铰链 - 然后门关闭，你看到关上门的前面，然后它停在那里。在我的情况下，用户将单击一个按钮，然后将使用动画作为介绍显示此元素。

解决方案应该使用CSS3（javascript也可以），只能在Webkit中工作（我会在其他浏览器上做一些完全不同的动画）

Answer 1

在transform-origin上使用-webkit-transform-origin: 0% 50%：.flipper。只是看兼容性。 caniuse.com未列出transform-origin。记住供应商前缀。