使用javascript获取顶点角点时CSS 2d和3d矩阵之间存在差异的问题

尝试动态获取任意变换元素的顶点角点。当所有变换都是3d时，将各种解决方案混合在一起可以产生非常好的效果。看

但当二维和三维变换存在于同一继承链中时，则不起作用

$（.target”）。在（'click'，function（）上{
//从上次单击中删除顶点
$（“.vertex”）.remove（）；
scrollpos=getScroll（）；
//存储嵌套转换
var转换=[]；
//遍历DOM并获取影响此元素的所有转换
var p=这个；
while（p&&p.nodeType==1）{
var computedStyle=getComputedStyle（p）；
//从矩阵字符串中解析4x4矩阵
var t=parseTransformMatrix（computedStyle.transform）；
var css=computedStyle.transform；
//如果应用了变换，让我们记住它
if（t）{
//获取变换原点
//将transform设置为NOE，因为我们需要在末尾获得未转换的子元素矩形
var origin=computedStyle.transformOrigin；
p、 style.transform='none'；
//将对象添加到包含有用信息的transforms数组中
转换。取消移位({
矩阵：t，
元素：p，
来源:来源,，
css:css
})
}
p=p.parentNode；
}
//所有应用的转换都已撤消。让我们获取元素的未转换矩形
var box=this.getBoundingClientRect（）；
var i=0；
while（i对于（var k=0；k虽然这不能解决您的问题，但它可以为您指明正确的方向

在第二个示例中，您使用了
rotate（-10deg）
，在第一个示例中
rotateX（-10deg）
。在css的3d空间中
rotate
等于
rotateZ
，而不是
rotateX