zoukankan      html  css  js  c++  java
  • css3中perspective

    perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
    当perspective:none/0;时,相当于没有设perspective(length)。比如要建立一个小立方体,长宽高都是200px。如果perspective < 200px ,那就相当于站在盒子里面看的结果,如果perspective 非常大那就是站在非常远的地方看(立方体已经成了小正方形了)。
    当元素没有设置perspective(length)时,所有后代元素被压缩在同一个二维平面上,不存在景深的效果。如果设置perspective(length)后,将会看到三维的效果。默认的透视视角中心在容器(是perspective所在的元素,不是他的后代元素)的中点,也就是perspective-origin: 50% 50%。当然你也可以自己设置,比如:左上角-webkit-perspective-origin: 0px 0px;。

    要为舞台设置perspective属性,舞台就是要发生3D转换的元素的父元素

    <div class="舞台" >

       <div class=""3D >看好,我要动了</div>

    </div>

     perspective 视觉点距离,translateZ,不固定为屏幕向前方向,而是div原本的正面方向,即div设置了,rotateX(-90deg)后,原正面向下,translateZ(25px); 则为向下移动;

    一个很好的讲解了3D的文章,请忽略他搞笑的部分

    http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-4/#comment-317461

  • 相关阅读:
    HDU1196 ZOJ2417 Lowest Bit
    HDU1008 ZOJ2108 Elevator
    HDU2614 Beat
    HDU2057 A + B Again
    POJ3984 迷宫问题
    HDU1013 POJ1519 Digital Roots
    HDU2051 Bitset
    HDU2037 今年暑假不AC
    ACM入门练习与递推小结
    HDU2046 骨牌铺方格【递推】
  • 原文地址:https://www.cnblogs.com/miaowwwww/p/5475719.html
Copyright © 2011-2022 走看看