css - webkit 翻转动画位置并不总是在中间

Question

我的网站 fit-life.info 上有这个动画

div.anim {
-webkit-animation:flipInX 1.2s 0s 向前缓动；
-moz-动画:flipInX 1.2s 0s 向前缓动；
-o-动画:flipInX 1.2s 0s 向前缓动；
动画:flipInX 1.2s 0s 向前缓动；
不透明度:0； }

但有时有些元素不会像本页发布图片那样从中间开始动画 http://fit-life.info/fitness/koiliako-lipos-kathimerina-lathoi-pou-prokaloun-tin-auksisi-tou-2/我认为我的问题可以像我在这篇文章中看到的解决方案一样得到解决 How can I change the 'pivot-point' of this flip animation?但我不知道我必须把

变换原点:中心；

也许我的页面加载速度太快，javascript 获取了错误的元素位置？

Answer 1

您可能需要包含供应商(浏览器)前缀，尝试添加:

-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;