Javascript 使用带有getComputedStyle（元素）的Web动画API问题模拟附加动画。转换

我需要模拟使用Web动画API添加动画

如中所述，还不支持添加动画，建议使用getComputedStyleelement

我面临的问题是getComputedStyleelement.transform返回的matrix3d可能没有包含足够的透视信息，因此，如果我使用作为开始关键帧，动画与红盒的问题不同

在此示例中，蓝色框具有所需的动画，红色框动画不正确：

我想知道： -如果存在此问题的解决方案 -如果附加动画的实现支持透视变换

谢谢你抽出时间

var elem=document.getElementById'target'； var style=window.getComputedStyleelem； 动画元素[{ transform:style.transform//使用从getComputedStyle返回的matrix3d }, { 变换：“旋转179度缩放Z 2平移Z 200px” }], { 持续时间：3000 }; var elem2=document.getElementById'target2'； elem2.animate[{ 变换：'rotateY-179deg scaleZ2 translateZ200px' }, { 变换：“旋转179度缩放Z 2平移Z 200px” }], { 持续时间：3000 }; 包装纸， 包装2{ 透视图：1000px； } 目标 目标2{ 位置：绝对位置； 顶部：100px； 宽度：200px； 高度：300px； } 目标{ 左：100px； 背景色：红色； 变换：旋转-179度缩放Z 2平移Z 200px； } 目标2{ 左：400px； 背景颜色：蓝色； 变换：旋转-179度缩放Z 2平移Z 200px； } 错误动画 正确的动画

---

您在代码段中遇到了一些不同的问题

主要的一点是目标元素相对于父元素的位置不同。其中一个的左值高于另一个。由于透视值在包装器中，透视原点也在包装器中，因此很难使它们匹配

我重做了这个片段，它表明当这个问题得到解决时，透视图并没有真正的问题

但正如我在前面的问题中所讨论的那样，仍然存在信息缺失的问题，正如我所说的，这是无法解决的

var elem2=document.getElementById'target2'； var style=window.getComputedStyleelem2； var elem=document.getElementById'target'； elem.style.transform=样式； 包装纸， 包装2{ 宽度：200px； 高度：300px； 边框：纯色1px蓝色； 顶部：100px； 位置：绝对位置； } 包装纸{ 左：400px； } 包装2{ 透视图：1000px； 左：600px； } 目标 目标2{ 宽度：200px； 高度：300px； 位置：绝对位置； } 目标{ 背景色：红色； 变换：透视1000px旋转-45度刻度Z 2平移Z 200px； } 目标2{ 背景颜色：蓝色； 变换：旋转-45度缩放Z 2平移Z 200px； } 错误动画 正确的动画

---

部分问题似乎是因为-179度也可以被认为是181度，因此使用矩阵的动画似乎是从181度到179度，这是一个非常小的旋转，可能对眼睛来说不明显，不像-179到179度旋转，这是一个358度的摆动。因此，当使用矩阵时，执行此操作的方法似乎是将初始旋转设置为181度，为0度旋转添加一个中间关键帧，以便动画从181度到0度到179度。这是我的意思的一个演示。但正如你所看到的，它看起来仍然不是100%正确。红色框没有蓝色框向左移动那么多，因此可能需要更多的修正。如果这对你有帮助的话，我可以把它作为一个答案。@harry我已经在这一行回答了前面的一个问题：哦，我明白了@vals。回答得好@哈里：还有一个观点来源问题。。。。