在线文档教程
CSS

perspective-origin

perspective-origin

这是一种实验技术

由于该技术的规范不稳定,请查看各种浏览器的兼容性表格以查阅用法。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

perspective-origin CSS属性决定了观察者所处的位置。它被perspective属性用作消失点vanishing point )。

/* One-value syntax */ perspective-origin: x-position; /* Two-value syntax */ perspective-origin: x-position y-position; /* When both x-position and y-position are keywords, the following is also valid */ perspective-origin: y-position x-position; /* Global values */ perspective-origin: inherit; perspective-origin: initial; perspective-origin: unset;

Initial value50% 50%
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of bounding box
Mediavisual
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc
Canonical orderOne or two values, with length made absolute and keywords translated to percentages

语法

可能值

x-position指示消失点的横坐标的位置。它可以具有以下值之一:

  • <length-percentage>将该位置指示为绝对长度值或相对于元素的宽度。它的值可能是负的。

  • left,一个关键字为表示0长度值的快捷方式。

  • center,该关键字为表示50%百分比值的快捷方式。

  • right,该关键字为表示100%百分比值的快捷方式。

y-position指示消失点的纵坐标。它可以具有以下值之一:

  • <length-percentage>将该位置指示为绝对长度值或相对于元素的高度。它的值可能是负的。

  • top,该关键字为表示0长度值的快捷方式。

  • center,该关键字为表示50%百分比值的快捷方式。

  • bottom,该关键字为表示100%百分比值的快捷方式。

形式语法

<position>where <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]] where <length-percentage> = <length> | <percentage>

实例

此示例显示具有常用perspective-origin值的多维数据集。

HTML

<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

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

结果

规范围

SpecificationStatusComment
CSS Transforms Level 2The definition of 'perspective-origin' in that specification.Editor's DraftInitial definition.

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support12-webkit(Yes)-webkit (Yes)10 (10)-moz 16 (16)11015(Yes)-webkit

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support3.0-webkit(Yes)-webkit (Yes)10.0 (10)-moz 16.0 (16)18.1(Yes)-webkit(Yes)-webkit