mozilla
您的搜索结果

    perspective

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

    概要

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

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

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

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

    语法

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

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

    举例

    3个正方体

    HTML 内容

    <table>
       <tbody>
          <tr>
             <th><code>perspective: 250px;</code>
             </th>
             <th><code>perspective: 350px;</code>
             </th>
             <th><code>perspective: 500px;</code>
             </th>
          </tr>
          <tr>
             <td>
                <div class="container">
                   <div class="cube pers250">
                      <div class="face front">1</div>
                      <div class="face back">2</div>
                      <div class="face right">3</div>
                      <div class="face left">4</div>
                      <div class="face top">5</div>
                      <div class="face bottom">6</div>
                   </div>
                </div>
             </td>
             <td>
                <div class="container">
                   <div class="cube pers350">
                      <div class="face front">1</div>
                      <div class="face back">2</div>
                      <div class="face right">3</div>
                      <div class="face left">4</div>
                      <div class="face top">5</div>
                      <div class="face bottom">6</div>
                   </div>
                </div>
             </td>
             <td>
                <div class="container">
                   <div class="cube pers500">
                      <div class="face front">1</div>
                      <div class="face back">2</div>
                      <div class="face right">3</div>
                      <div class="face left">4</div>
                      <div class="face top">5</div>
                      <div class="face bottom">6</div>
                   </div>
                </div>
             </td>
          </tr>
       </tbody>
    </table>
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

    CSS 内容

    /* Shorthand classes for different perspective values */
    .pers250 {
        perspective: 250px;
        -webkit-perspective: 250px;
    }
    .pers350 {
        perspective: 350px;
        -webkit-perspective: 350px;
    }
    .pers500 {
        perspective: 500px;
        -webkit-perspective: 500px;
    }
    
    /* Define the container div, the cube div, and a generic face */
     .container {
       width: 200px;
       height: 200px;
       margin: 75px 0 0 75px;
       border: none;
    }
    .cube {
       width: 100%;
       height: 100%;
       backface-visibility: visible;
       perspective-origin: 150% 150%;
       transform-style: preserve-3d;
       -webkit-backface-visibility: visible;
       -webkit-perspective-origin: 150% 150%;
       -webkit-transform-style: preserve-3d;
    }
    .face {
       display: block;
       position: absolute;
       width: 100px;
       height: 100px;
       border: none;
       line-height: 100px;
       font-family: sans-serif;
       font-size: 60px;
       color: white;
       text-align: center;
    }
    
    /* Define each face based on direction */
     .front {
       background: rgba(0, 0, 0, 0.3);
       transform: translateZ(50px);
       -webkit-transform: translateZ(50px);
    }
    .back {
       background: rgba(0, 255, 0, 1);
       color: black;
       transform: rotateY(180deg) translateZ(50px);
       -webkit-transform: rotateY(180deg) translateZ(50px);
    }
    .right {
       background: rgba(196, 0, 0, 0.7);
       transform: rotateY(90deg) translateZ(50px);
       -webkit-transform: rotateY(90deg) translateZ(50px);
    }
    .left {
       background: rgba(0, 0, 196, 0.7);
       transform: rotateY(-90deg) translateZ(50px);
       -webkit-transform: rotateY(-90deg) translateZ(50px);
    }
    .top {
       background: rgba(196, 196, 0, 0.7);
       transform: rotateX(90deg) translateZ(50px);
       -webkit-transform: rotateX(90deg) translateZ(50px)
    }
    .bottom {
       background: rgba(196, 0, 196, 0.7);
       transform: rotateX(-90deg) translateZ(50px);
       -webkit-transform: rotateX(-90deg) translateZ(50px);
    }
    
    /* Make the table a little nicer */
    th, p, td {
       background-color: #EEEEEE;
       padding: 10px;
       font-family: sans-serif;
       text-align: left;
    }

    结果

    规范

    Specification Status Comment
    CSS Transforms Level 1
    perspective
    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)
    ? 未实现 (Yes)-webkit

    请看

    文档标签和贡献者

    Contributors to this page:
    最后编辑者: FredWe,