css - 围绕组的中心旋转一组 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;