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-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;
}

结果

规范

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

参见

文档标签和贡献者

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