CSS 如何获取 CSS3-3D 变形元素的屏幕位置

在本文中，我们将介绍如何获取 CSS3-3D 变形元素的屏幕位置。CSS3 提供了许多强大的变形效果，其中包括旋转、缩放和位移等。然而，使用这些效果后，我们有时可能需要获取转换后元素在屏幕上的位置信息。

阅读更多：CSS 教程

1. 使用 getBoundingClientRect() 方法

使用 getBoundingClientRect() 方法是一种简单和常用的方式来获取元素在页面中的位置信息。这个方法返回一个 DOMRect 对象，包含了元素的位置和尺寸信息。

下面是一个示例，展示了如何使用 getBoundingClientRect() 方法获取一个 3D 变形元素的屏幕位置：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  perspective: 1000px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(45deg);
}
</style>
</head>
<body>
<div id="container">
  <div id="box"></div>
</div>

<script>
var box = document.getElementById("box");
var rect = box.getBoundingClientRect();

console.log("屏幕位置：", rect.left, rect.top);
console.log("尺寸大小：", rect.width, rect.height);
</script>
</body>
</html>

在这个示例中，我们创建了一个红色的正方形盒子，并将其旋转了45度。通过调用 getBoundingClientRect() 方法获取这个盒子的位置和尺寸信息，并使用 console.log() 函数在控制台输出。

2. 使用 Matrix 矩阵进行计算

除了使用 getBoundingClientRect() 方法外，我们还可以使用变形矩阵（Matrix）进行计算来获取元素的屏幕位置。在 CSS3-3D 变形中，元素的变形效果是通过 Matrix 矩阵来描述的。

下面是一个示例，展示了如何使用 Matrix 矩阵计算一个 3D 变形元素的屏幕位置：

<!DOCTYPE html>
<html>
<head>
<style>
#container {
  perspective: 1000px;
}

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(45deg);
}
</style>
</head>
<body>
<div id="container">
  <div id="box"></div>
</div>

<script>
var box = document.getElementById("box");
var transformMatrix = window.getComputedStyle(box).getPropertyValue("transform");
var matrixArray = transformMatrix.substring(7, transformMatrix.length - 1).split(", ");
var matrix = new WebKitCSSMatrix(transformMatrix);

console.log("屏幕位置：", matrix.m41, matrix.m42);
</script>
</body>
</html>

在这个示例中，我们首先获取到元素的变形矩阵，然后通过 WebKitCSSMatrix 对象将矩阵字符串转换为矩阵对象。我们可以通过访问矩阵对象的 m41 和 m42 属性来获取元素的屏幕位置信息。