CSS参考手册
变换 | Transforms
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 |
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。