Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
您的搜索结果

    perspective-origin

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

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

    概述

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

    初始值50% 50%
    适用元素transformable elements
    是否是继承属性否
    Percentagesrefer to the size of bounding box
    适用媒体visual
    计算值for length the absolute value, otherwise a percentage
    是否适用于 CSS 动画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.
    正规顺序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-position 和 y-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;
}

    结果

    规范

    Specification Status Comment
    CSS Transforms Level 1
    perspective-origin    		 Working Draft  

    浏览器兼容性

    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

    参见

    文档标签和贡献者

     此页面的贡献者： Sebastianz, fscholz, FredWe, hutuxu
     最后编辑者: Sebastianz,