CSS3 perspective-origin 属性
说明
perspective-origin CSS 属性定义了 perspective 属性的原点（3D 空间的消失点）。 它有效地设置了查看者似乎正在查看元素的子元素的 X 和 Y 位置。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | 50% 50% |
|---|---|
| 适用于： | 可变形元素 |
| 继承： | No |
| 动画： | Yes. 参见动画属性。 |
| 版本： | New in CSS3 |
语法
属性的语法如下：
注意：如果只为 perspective-origin 属性指定了一个值，则假定第二个值为 center，它等于 50% 值。
下面的示例显示了 perspective-origin 属性的作用。
.container{
width: 125px;
height: 125px;
perspective: 300px;
perspective-origin: 20% top;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg); /* 标准语法 */
}注意：如果这两个值中至少有一个不是关键字，那么第一个值表示水平位置（或偏移量），第二个值表示透视原点的垂直位置（或偏移量） .
属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
| x-position |
表示透视原点的水平位置（或偏移）。 它可以具有以下值之一：
|
| y-position |
表示透视原点的垂直位置（或偏移量）。 它可以具有以下值之一：
|
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 perspective-origin 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 perspective-origin 属性。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS3 3D 变换.
相关属性： perspective, backface-visibility, transform, transform-origin, transform-style.
Advertisements