有谁知道或有人开发了一种简单的机制来确定使用 CSS 3D 转换转换的元素的 2d 位置

发布于 2024-12-20 09:44:35 字数 851 浏览 1 评论 0原文

我正在用 JavaScript 编写一个 3d 库，它利用 Webkits 3d 转换（我很乐意公开发布代码，但它是针对客户的）。但它生成的 HTML 标记看起来像这样：

<div id="world">
  <span class="pivot" id="map">
    <div style="position: absolute; left: -512px; top: -512px; width: 1024px; height: 1024px;">
      <img src="images/test-grid-1024px.png" />
    </div>
    <span class="pivot" style="-webkit-transform: translate3d(256px,0px,0px) rotateZ(-30deg) rotateX(-90deg);">
      <div class="marker">Marker<br/><span style="font-size: 48px; font-weight: bold;">1</span></div>
    </span>
  </span>
</div>

无论如何，Webkit 3d CSS 内容中似乎严重缺少的东西之一是在坐标系之间进行转换的简单机制，即确定对象相对于页面的位置（或其他一些元素）在二维坐标中。同样，如果能够从页面获取 2d 坐标并将其投影到变换后的元素的平面上，那就太好了。

这应该不是很困难，但如果其他人已经这样做了，我宁愿不这样做。或者，如果它已添加到 Webkit，但我根本找不到文档，那就太棒了。

原文

I'm writing a 3d library in JavaScript that leverages Webkits 3d transformations (I'd love to post the code publicly, but it's for a client). But the kind of HTML markup it generates looks something like this:

<div id="world">
  <span class="pivot" id="map">
    <div style="position: absolute; left: -512px; top: -512px; width: 1024px; height: 1024px;">
      <img src="images/test-grid-1024px.png" />
    </div>
    <span class="pivot" style="-webkit-transform: translate3d(256px,0px,0px) rotateZ(-30deg) rotateX(-90deg);">
      <div class="marker">Marker<br/><span style="font-size: 48px; font-weight: bold;">1</span></div>
    </span>
  </span>
</div>

Anyway, one of the things that seems to be critically missing from the Webkit 3d CSS stuff is simple mechanisms for converting between coordinate systems, i.e. determining where an object is relative to the page (or some other element) in 2d coordinates. Similarly, it would be great to be able to take a 2d coordinate from the page and project it onto the plane of a transformed element.

This shouldn't be enormously difficult to do but I'd rather not do it if someone else already has. Or if it's been added to Webkit and I simply can't find the docs, that would be awesome.

分享到QQ

分享到微博