DigitalOcean 为您的旅程的每个阶段提供云产品。从 免费的 200 美元信用额度开始！
perspective-origin 属性决定了 透视 属性的原点。可以将其视为当前 3D 空间的消失点。
请注意，对于 perspective 属性，perspective-origin 必须在父元素上定义，才能为变换后的子元素提供深度。
perspective-origin 属性本身不会做任何事情。它必须与 perspective 一起在元素上定义。
/**
* Syntax
* perspective-origin: x-position
* perspective-origin: x-position y-position
*
* perspective-origin: <percentage> | <length> | constants | inherit
*/
.element1 { perspective-origin: 25% 75%; }
.element2 { perspective-origin: 10px 25px; }
.element3 { perspective-origin: left bottom; }以下演示了当通过更改 perspective-origin 值（常量）来改变 3D 立方体的消失点时，3D 立方体的行为。
嘿，让我们为乐趣而动画 perspective-origin！
- 它从
0% 0%（左上角）开始 - 然后到
100% 0%（右上角） - 然后到
100% 100%（右下角） - 然后到
0% 100%（左下角） - 然后返回到 1. 并重新启动
浏览器支持
此浏览器支持数据来自 Caniuse，它提供了更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 12* | 10* | 11 | 12 | 4* |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 3* | 3.2* |
太棒了。
不知为何，这在我的工作机器上的 chrome 中不起作用，它在 ubuntu 上运行着 chrome 28，似乎所有 3D 效果在这个版本的 ubuntu 上的 chrome 中都不起作用。
感谢你的辛勤付出。
但我读完你的文章后有一个问题。
你在文章中写道“`perspective-origin` 属性确定 `perspective` 属性的原点。把它想象成当前 3D 空间的消失点。”
在 css3 3d 变换规范中写道“`perspective-origin` 属性为 `perspective` 属性建立原点。它实际上设置了观察者看起来位于元素子元素的 X 和 Y 位置。”
我认为观察者就是视点。那么，视点和消失点在 3D 变换中重合吗？感谢你的帮助。