例
设置3D元素的基地位置:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
试一试» 定义和用法
的透视原点属性定义,其中一个三维元件是根据在X和Y轴。 此属性允许您更改3D元素的底部位置。
当定义一个元素的透视原点属性,它是位于所述子元素,而不是元素本身。
Note:此属性必须与使用的角度属性,而只影响3D转换的元素!
为了更好地理解透视origin属性, 查看演示 。
默认值: | 50% 50% |
---|---|
遗传: | no |
动画: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript语法: | object .style.perspectiveOrigin="10px 50%" Try it |
浏览器支持
在表中的数字规定,完全支持该属性的第一个浏览器版本。
其次是-webkit-号码或-moz-指定用一个前缀工作的第一个版本。
属性 | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9 4.0.3 -webkit- | 23.0 15.0 -webkit- |
CSS语法
perspective-origin:x-axis y-axis|initial|inherit;
属性值
属性值 | 描述 |
---|---|
x-axis | 定义该视图被放置在X轴 可能的值:
默认值:50% |
y-axis | 定义该视图被放置在Y轴 可能的值:
默认值:50% |
初始 | 将此属性设置为默认值。 阅读关于初始 |
继承 | 继承其父元素此属性。 阅读关于继承 |
相关页面
CSS教程: CSS 3D变换
HTML DOM参考: perspectiveOrigin property