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

关于http://www.cnblogs.com/zhangkunweb/p/iosSelect.html这个组件,有位园友问我一个问题:

为什么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做,而圆心 且 是共同的(同一个位置)只能用定位的方式了。

posted @ 2018-04-12 14:46  zhanglearning  阅读(196)  评论(1编辑  收藏