Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
您的搜索结果

    perspective-origin

    这篇翻译不完整。请帮忙从英语翻译这篇文章

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

    概述

    perspective-origin 属性指定了观察者的位置,在属性perspective中被用作消失点

    • 初始值 50% 50%
    • 适用元素 transformable elements
    • 可继承 no
    • Percentages refer to the size of bounding box
    • 适用媒体 visual
    • 计算值 for <length> the absolute value, otherwise a percentage
    • 可动画 yes, as a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order One or two values, with length made absolute and keywords translated to percentages

    语法

    Formal syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]
    
    perspective-origin: x-position            /* one-value syntax */
    perspective-origin: x-position y-position /* two-value syntax */
    
    
    当 x-positiony-position 为关键字时,以下写法都是允许的:
    
    perspective-origin: y-position x-position
    
    perspective-origin: inherit
    

    x-position
    指定消失点的横坐标,其值有以下形式:
    • <percentage> 百分比,相对于元素宽度,可为负值。
    • <length> 长度值,可为负值。
    • left,关键字,0值的简记。
    • center,关键字,50%的简记。
    • right,关键字,100%的简记。
    y-position
    指定消失点的纵坐标,其值有以下形式:
    • <percentage> 百分比,相对于元素的高度,可为负值。
    • <length> 长度值,可为负值。
    • top,关键字,0值得简记。
    • center,关键字,50%的简记。
    • bottom,关键字,100%的简记。

    示例

    HTML Content

    <table>
       <tbody>
          <tr>
             <th><code>perspective-origin: top left;</code>
             </th>
             <th><code>perspective-origin: top;</code>
             </th>
             <th><code>perspective-origin: top right;</code>
             </th>
          </tr>
          <tr>
             <td>
                <div class="container">
                   <div class="cube potl">
                      <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 potm">
                      <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 potr">
                      <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>
          <tr>
             <th><code>perspective-origin: left;</code>
             </th>
             <th><code>perspective-origin: 50% 50%;</code>
             </th>
             <th><code>perspective-origin: right;</code>
             </th>
          </tr>
          <tr>
             <td>
                <div class="container">
                   <div class="cube poml">
                      <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 pomm">
                      <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 pomr">
                      <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>
          <tr>
             <th><code>perspective-origin: bottom left;</code>
             </th>
             <th><code>perspective-origin: bottom;</code>
             </th>
             <th><code>perspective-origin: bottom right;</code>
             </th>
          </tr>
          <tr>
             <td>
                <div class="container">
                   <div class="cube pobl">
                      <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 pobm">
                      <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 pobr">
                      <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 Content

    /* Shorthand classes for perspective-origin values */
    .potl {
        perspective-origin: top left;
        -webkit-perspective-origin: top left;
    }
    .potm {
        perspective-origin: top;
        -webkit-perspective-origin: top;
    }
    .potr {
        perspective-origin: top right;
        -webkit-perspective-origin: top right;
    }
    .poml {
        perspective-origin: left;
        -webkit-perspective-origin: left;
    }
    .pomm {
        perspective-origin: 50% 50%;
        -webkit-perspective-origin: 50% 50%;
    }
    .pomr {
        perspective-origin: right;
        -webkit-perspective-origin: right;
    }
    .pobl {
        perspective-origin: bottom left;
        -webkit-perspective-origin: bottom left;
    }
    .pobm {
        perspective-origin: bottom;
        -webkit-perspective-origin: bottom;
    }
    .pobr {
        perspective-origin: bottom right;
        -webkit-perspective-origin: bottom right;
    }
    
    /* Define the container div, the cube div, and a generic face */
     .container {
       width: 100px;
       height: 100px;
       margin: 24px;
       border: none;
    }
    .cube {
       width: 100%;
       height: 100%;
       backface-visibility: visible;
       perspective: 300px;
       transform-style: preserve-3d;
       -webkit-backface-visibility: visible;
       -webkit-perspective: 300px;
       -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;
    }

    结果

    Specifications

    Specification Status Comment
    CSS Transforms Level 1 Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 12-webkit 10 (10)-moz
    16 (16)
    10 15 (Yes)-webkit
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 3.0-webkit 10.0 (10)-moz
    16.0 (16)
    8.1 (Yes)-webkit (Yes)-webkit

    See also

    文档标签和贡献者

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