在组的中心周围旋转一组3D CSS对象

Question

我在CSS中构建了3个小立方体，并将它们分组在CSS文件最底部的div #first_line_of_cubes内的一行中。你可以在这里看到它：http://jsfiddle.net/ZVVK3/（我认为它仅适用于Chrome，因为不存在所有必要的前缀）

现在我想使用：

旋转#first_line_of_cubes行

-webkit-transform:rotateY() rotate(x)

问题是ir在分组立方体的左侧角旋转，但我希望它围绕分组立方体的中心旋转。

到目前为止，谷歌表示该解决方案是 -webkit-transform-origin 属性，但我无法对我尝试过的任何值产生任何影响。问题是什么？如何让它围绕它的中心旋转？

如果没有CSS解决方案，JavaScript / jQuery也没问题。

Answer 1

对我来说，在Chrome版本27中设置原点似乎工作正常，虽然看起来中心不是我想的那样：

http://jsfiddle.net/MRpUb/

-webkit-transform-origin:300px 0px 0px;