transform-style为什么子元素需要定位？

有个园友问我一个问题：

为什么ul和li都要absolute定位呢，让其自然排列，然后沿着x轴进行旋转不行吗？这块一直无法理解。

在这里进行详细的解答：

我们知道圆是有圆心和半径的， 我用定位的方式就是要确定圆心和半径。那么圆心和半径是哪里呢？
圆心就是你定位的那个点。 半径就是translate3d 的 Z 轴的100px。
（1）假如我们不用定位的方式，让其自然排列，而且是不加 transform: rotate3d() translate3d()的。那么结果是什么呢？
答案是没有结果，和平常一个样子，如下图：

问什么这样，是因为我们设置的是transform-style， 如果子元素没有transform， 那么父级的设置又有什么用呢。

（2）假如我们不用定位的方式，让其自然排列，子元素加 transform: rotate3d() translate3d()的。那么结果是什么呢？

答案还是不行，虽然有效果。感觉有3d效果，但是当把 子元素backface-visibility: hidden去掉，你会惊讶的发现怎么不是圆形的， 为什么呢？

因为如果没有定位，那么每个li元素的圆心都是不同的，都有自己的圆心，及时用rotate3d进行了旋转，由于没有共同的圆心，导致无法让ul列表变成圆形。

总之：

如果想做成圆形，就必须有共同的圆心，共同的半径。半径我们可以用translate3d做，而圆心 且 是共同的（同一个位置）只能用定位的方式了。