javascript - 如何使用 3D 变换获取元素的未变换位置/大小？

Question

我正在创建类似于 3D map 的东西，我需要能够在使用 CSS3 3D 变换的同时放大某些元素。我发现如果在任何旋转之前应用平移，您可以非常简单地使用未转换的 2D 坐标来执行此操作。

我现在的问题是获取元素的未转换 2D 属性，以便我可以移动“相机”以聚焦并缩放到所述元素。

我曾尝试在应用 3D 转换之前存储原始属性，但这是不可靠且不可靠的，因为它不考虑视口(viewport)更改，有时会给出奇数，就好像父容器小得多一样:

var contentChildren = $("#content3d").children().each(function(index, element){
    $(this).attr("flatleft", $(this).position().left);
    $(this).attr("flattop", $(this).position().top);
    $(this).attr("flatwidth", $(this).width());
    $(this).attr("flatheight", $(this).height());
});

那么，我怎样才能获得正在 3D 转换的元素的未转换属性？

Answer 1

您可以尝试使用 jquery 中的 .data 函数，据我所知，它非常简单且非常可靠。

$(this).data("flatleft", $(this).position().left);

引用:http://api.jquery.com/data/