CSS3 3D 変換を利用しながら、特定の要素にズームできるようにする必要がある 3D マップに似たものを作成しています。回転の前に変換を適用すると、変換されていない 2D 座標を非常に簡単に使用してこれを行うことができることがわかりました。
私の問題は、要素の変換されていない2Dプロパティを取得して、「カメラ」を移動してその要素に焦点を合わせてズームできるようにすることです。
3D 変換を適用する前に元のプロパティを保存しようとしましたが、ビューポートの変更が考慮されておらず、親コンテナーがはるかに小さいかのように奇数が表示されることがあるため、これは信頼性が低くハッキーです。
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 変換された要素の変換されていないプロパティを取得するにはどうすればよいでしょうか?