MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
您的搜索结果

    perspective

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

    概要

    perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定。

    三维元素在观察者后面的部分不会绘制出来,即z轴坐标值大于perspective属性值的部分。

    默认情况下,消失点位于元素的中心,但是可以通过设置perspective-origin属性来改变其位置。

    当该属性值不为0none时,会创建新的层叠上下文

    • 初始值 none
    • 适用元素 transformable elements
    • 可继承 no
    • 适用媒体 visual
    • 计算值 the absolute length or none
    • 可动画 yes, as a length
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    语法

    语法形式: none | <length>
    perspective: none
    perspective: 20px     /* <length> values */
    perspective: 3.5em
    
    perspective: inherit
    

    none
    当pespective样式没有被应用时的默认值.
    <length>
    <length>,指定观察者距离z=0平面的距离,为元素及其内容应用透视变换。当值为0或负值时,无透视变换。

    举例

    perspective:250px; perspective:350px; perspective:500px;
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6
       
    1
    2
    3
    4
    5
    6

    标准

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    浏览器兼容性

    特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本支持 12-webkit 10 (10)-moz
    16 (16)
    10 15-webkit (Yes)-webkit
    特性 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本支持 3.0-webkit 10.0 (10)-moz
    16.0 (16)
    ? Not supported (Yes)-webkit

    请看

    文档标签和贡献者

    此页面的贡献者有: hutuxu, teoli, luommingzhong
    最后编辑者: teoli,