CSS 3 perspective-origin 属性
css perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴
该属性可以改变 3D 元素的底部位置
定义时的 perspective-origin 属性，它是一个元素的子元素，透视图，而不是元素本身
对于 Chrome 和 Safari 用户：为了更好地理解 perspective 属性
| 默认值 | 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- 前的数字为支持该前缀属性的第一个浏览器版本号
| Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|
| 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%;
}本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！