CSS 3 perspective-origin 属性 - CSS 参考手册

CSS perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴

该属性可以改变 3D 元素的底部位置

定义时的 perspective-origin 属性，它是一个元素的子元素，透视图，而不是元素本身

对于 Chrome 和 Safari 用户：为了更好地理解 perspective 属性

对于 Chrome 和 Safari 用户:为了更好地理解 perspective-Origin 属性，可以查看范例

默认值	50% 50%
继承	no
版本	CSS3
JavaScript 语法	object.style.perspectiveOrigin="10% 10%"

语法

perspective-origin: *x-axis y-axis* ;

值说明

值	描述
x-axis	定义该视图在 x 轴上的位置默认值：50% 可能的值： left center right length %
y-axis	定义该视图在 y 轴上的位置默认值：50% 可能的值： top center bottom length %

浏览器支持

下表中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号


36.0 12.0 -webkit-	10.0	16.0 10.0 -moz-	9.0 4.0.3 -webkit-	23.0 15.0 -webkit-

范例

设置一个3D元素的基数位置

div {
    perspective:150;
    perspective-origin: 10% 10%;

    /* Safari and Chrome */
    -webkit-perspective:150; 
    /* Safari and Chrome */
    -webkit-perspective-origin: 10% 10%; 
}

运行范例 »