📌  相关文章
📜  HTML | DOM StyleperspectiveOrigin 属性(1)

📅  最后修改于: 2023-12-03 14:41:48.741000             🧑  作者: Mango

HTML | DOM Style perspectiveOrigin 属性

在 HTML DOM 中，perspectiveOrigin 属性设置一个 3D 转换元素的透视点。

语法
object.style.perspectiveOrigin="x-axis y-axis"
属性值

| 值 | 描述 | | ------------------ | ------------------------------------------------------------------------------------------------------------------- | | x-axis | 必需。规定元素的 X 轴方向的透视点位置。允许的值为 length、% 或 center。缺省值为 50%。 | | y-axis | 可选。规定元素的 Y 轴方向的透视点位置。允许的值为 length、% 或 center。缺省值为 50%。 | | initial | 设置该属性为其默认值。 | | inherit | 从父元素继承该属性。 |

实例

以下实例展示了如何使用 perspective 属性来设置透视视点：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px;
  height: 150px;
  border: 2px solid black;
  transform: perspective(200px) rotateX(45deg);
  /* Safari */
  -webkit-transform-style: preserve-3d;
  perspective-origin: right;
  /* Safari */
  -webkit-perspective-origin: right;
}
</style>
</head>
<body>

<h1>perspective-origin 属性</h1>

<div>pHello world!</div>

</body>
</html>
解释

当您使用透视性别更高的 transform 属性（比如 rotateX(45deg)）时，HTML 元素将有被放置在三维空间内的感觉，效果不仅仅是元素移动或按比例缩放。您可以使用 perspective 属性来设置 3D 元素距离屏幕的距离。

perspective-origin 属性规定了三维元素在何处放置于平面元素上。因此，该属性允许您改变 3D 元素的旋转基点。

在本例中，我们设置透视基点在 div 元素的右边（right），并将其透视值设置为 200 像素（perspective(200px)）。

结果产生了一个被透视的 div 元素，并绕 X 轴顺时针旋转 45 度，如下图所示：

perspective-origin 属性使用示例图

浏览器支持

| 属性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | | -------------- | ------ | --------------- | ----------------- | ----- | --------------- | | perspective | 12.0+ | 10.0+ | 10.0+ | 15.0+ | 4.0 | | perspective | 12.0+ | 10.0+ | 10.0+ | 15.0+ | 4.0 | | perspective | 12.0+ | 10.0+ | 10.0+ | 15.0+ | 4.0 | | perspective | 12.0+ | 10.0+ | 10.0+ | 15.0+ | 4.0 |