CSS3 perspective 属性
说明
perspective CSS 属性定义了查看对象所有子元素的视角。 它通常确定 Z = 0 平面和观察者之间的距离，以便为 3D 定位的元素提供深度感。 具有 Z > 0 的每个 3D 元素都会变大，而具有 Z < 0 的每个 3D 元素都会变小。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | none |
|---|---|
| 适用于： | 可变形元素 |
| 继承： | No |
| 动画： | Yes. 参见动画属性。 |
| 版本： | New in CSS3 |
语法
属性的语法如下：
下面的示例显示了 perspective 属性的作用。
.container {
width: 125px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px); /* 标准语法 */
}属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
| length | 表示透视深度的长度值。 如果为 0 或负数，则不应用透视变换。 |
none |
无需应用透视变换。 这是默认值。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 perspective 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 perspective 属性。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS3 3D 变换.
相关属性： perspective-origin, backface-visibility, transform, transform-origin, transform-style.
Advertisements