zoukankan      html  css  js  c++  java
  • 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做,而圆心 且 是共同的(同一个位置)只能用定位的方式了。

  • 相关阅读:
    经典机器学习算法总结
    从0开始学Python---01
    Android-Canvas.save() Canvas.restore() 总结
    Android-属性动画原理总结
    设计模式-外观模式
    设计模式-模板方法
    设计模式-装饰者模式
    设计模式-策略模式
    设计模式-工厂方法模式
    设计模式-简单工厂模式
  • 原文地址:https://www.cnblogs.com/zhangkunweb/p/transform_style.html
Copyright © 2011-2022 走看看