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 value | 50% 50% |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Media | visual |
Computed value | for <length> the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Canonical order | One 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;
}
结果
规范围
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 2The definition of 'perspective-origin' in that specification. | Editor's Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 12-webkit | (Yes)-webkit (Yes) | 10 (10)-moz 16 (16)1 | 10 | 15 | (Yes)-webkit |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 3.0-webkit | (Yes)-webkit (Yes) | 10.0 (10)-moz 16.0 (16)1 | 8.1 | (Yes)-webkit | (Yes)-webkit |