javascript - 如何标记 -webkit-transform-origin 的位置？

Question

我正在使用 CSS3 创建 CSS 动画。我正在使用 rotateX 旋转图像。我想以某种方式标记原点的位置，以便我可以准确地看到旋转点的位置。

如何标记 -webkit-transform-origin 的位置？我对任何解决方案、CSS 或 JavaScript 持开放态度。

Answer 1

在我正在使用的 chrome 版本（版本 18）中，-webkit-transformation-origin任何元素的最初始终是元素的中心，相对于该元素，两个坐标都是下限的。因此，如果

element.style.webkitTransformationOrigin

是一个空字符串，那么它将是

Math.floor(element.width/2) + "px " + Math.floor(element.height/2) + " px".

如果它不是空字符串，那么它将采用该格式，[x]px [y]px两个坐标之间有一个空格。如果需要，您可以使用正则表达式提取值，例如在您的情况下，并且由于该值是相对于元素的，因此您必须获取页面上元素的绝对位置并将原点添加到以获得您的原点的绝对位置。