javascript - 使用具有 matrix3d 值的初始关键帧时，用于转换的 CSS 动画无法正常工作

Question

我需要使用 CSS 动画在 div 上为属性 scaleZ() 和 translateZ() 执行动画。

当 transform 属性动画中的初始和最后关键帧值采用类似的“格式”时，以下代码可以正常工作:

• 0% 是变换:rotateY(-179deg) scaleZ(2) translateZ(200px);
• 100% 是变换:rotateY(179deg) scaleZ(2) translateZ(200px);

        console.clear();
        document.addEventListener('DOMContentLoaded', () => {
            let content1 = document.querySelector('#content1');
            var computedTransform = window.getComputedStyle(content1).transform;
            console.log(computedTransform);

        });

        @-webkit-keyframes animation {
            0% {
                /*works*/
                -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                /*issue*/
                /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        @keyframes animation {
            0% {
                /*works*/
                -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                /*issue*/
                /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        #content1 {
            -webkit-animation: animation 2s;
                    animation: animation 2s;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            /*works*/
            -webkit-transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
                    transform: rotateY(-179deg) scaleZ(2) translateZ(200px);
            /*issue*/
            /*transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);*/
        }

    <div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
        <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
        </div>
    </div>

---

对于从 Window.getComputedStyle() 返回的 matrix3D 编写的关键帧 0% 具有 transform 的相同动画不会制作动画正常工作:

• 0% 是 转换:matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1) ;
• 100% 是变换:rotateY(179deg) scaleZ(2) translateZ(200px);

        console.clear();
        document.addEventListener('DOMContentLoaded', () => {
            let content1 = document.querySelector('#content1');
            var computedTransform = window.getComputedStyle(content1).transform;
            console.log(computedTransform);

        });

 @-webkit-keyframes animation {
            0% {
                /*works*/
                /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
                /*issue*/
                -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                        transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        @keyframes animation {
            0% {
                /*works*/
                /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
                /*issue*/
                -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                        transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
            }


            100% {
                -webkit-transform: rotateY(179deg) scaleZ(2) translateZ(200px);
                        transform: rotateY(179deg) scaleZ(2) translateZ(200px);
            }
        }

        #content1 {
            -webkit-animation: animation 2s;
                    animation: animation 2s;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
            /*works*/
            /*transform: rotateY(-179deg) scaleZ(2) translateZ(200px);*/
            /*issue*/
            -webkit-transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
                    transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
        }

    <div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
        <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
        </div>
    </div>

出于技术原因，我需要使用 transformation 的值作为关键帧 0% 从 DOM 中的计算样式正确返回，使用 Window.getComputedStyle()或其他功能(如果可用)。

我的问题:

1. 我的第二个示例代码有问题吗？
2. 您能否建议一种从 DOM 获取计算值的替代方法？
3. 您是否知道与从 Window.getComputedStyle() 返回的值相关的任何错误？
4. 您是否知道 CSS 动画和 transform 的不同“符号”有任何错误？

注意:我在最新的 Chrome (55.0.2883.87 m) 和 FireFox (50.1.0) 上看到了这个问题。

欢迎任何解决方案或想法。

---

编辑:

我创建了几个新示例(用于 Chrome)以供进一步研究。

基本上是两个例子轮换

从 rotateY(20deg)
旋转 Y(90deg)

将转换与一种“符号”一起使用，按预期工作

期望的效果 https://jsbin.com/bodaxefake/edit?html,output

当这些值由计算的 CSS 样式获取并使用 matrix3d 重新应用于动画时，动画会出现轻微变形。

相反，我希望重现与 Window.getComputedStyle() 的 matrix3d 完全相同的结果的动画应该返回相同的值。

不正确的效果 https://jsbin.com/luhikahexi/edit?html,output

Answer 1

你的问题是第 4 点。但这并不是一个真正的错误，它是一个复杂的算法，试图弄清楚你想要做什么。

当你制作一个从旋转(0 度)到旋转(360 度)的动画时，你有没有想过这两个矩阵是一样的？如果仅指定初始状态和最终状态，则动画将不存在。

当您按照您的方式设置动画时，算法对要做什么毫 headless 绪，因此行为不是您所期望的。但我不会说这是一个错误。

我已经设置了一个动画来做你想要的。诀窍是让矩阵保持不变，添加一个我们要更改的初始旋转，然后添加另一个与此相反的旋转以保持原始状态。

由于这段代码有点长，我删除了 webkit 前缀。 (另一方面，现在也不需要)

console.clear();
document.addEventListener('DOMContentLoaded', () => {
  let content1 = document.querySelector('#content1');
  var computedTransform = window.getComputedStyle(content1).transform;
  console.log(computedTransform);

});

@keyframes animation {
  0% {
    transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
    0.1% {
    transform: rotateY(-179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
  100% {
    transform: rotateY(179deg) rotateY(179deg) matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
  }
}
#content1 {
  animation: animation 2s;
  animation-fill-mode: forwards;
  transform: matrix3d(-0.999848, 0, 0.0174524, 0, 0, 1, 0, 0, -0.0349048, 0, -1.9997, 0, -6.98096, 0, -399.939, 1);
}

<div id="wrapper1" style="position:fixed; top: 100px; left:300px; perspective: 1000px; width: 250px; height:250px; border: dotted 1px blue">
  <div id="content1" style="width: 250px; height:250px; background-color:lightsalmon; opacity:0.2;">
  </div>
</div>

真正的问题是动画的起点和终点没有足够的信息来重建它。变换矩阵没有您在一系列单独变换中提供的信息

查看代码片段(二维):开始和结束状态相同，但动画不同。在 3D 中，还有更多的可能性

.test {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 400px;
  left: 100px;
}
#one {
  background-color: lightgreen;
  transform: translateX(200px);
  animation: tr1 6s infinite;
}
@keyframes tr1 {
  0% {
    transform: rotate(0deg) translateX(200px)
  }
  33%,
  100% {
    transform: rotate(-90deg) translateX(200px)
  }
}
#two {
  background-color: lightblue;
  transform: translate(200px, 0px);
  animation: tr2 6s infinite;
}
@keyframes tr2 {
  0%, 33% {
    transform: translate(200px, 0px) rotate(0deg)
  }
  66%,
  100% {
    transform: translate(0px, -200px) rotate(-90deg)
  }
}
#three {
  background-color: tomato;
  transform: translate(200px, -200px) rotate(0deg) translateY(200px);
  animation: tr3 6s infinite;
}
@keyframes tr3 {
  0%, 66% {
    transform: translate(200px, -200px) rotate(0deg) translateY(200px) rotate(0deg);
  }
  100% {
    transform:  translate(200px, -200px) rotate(-270deg)  translateY(200px) rotate(180deg);
  }
}

<div class="test" id="one">1</div>
<div class="test" id="two">2</div>
<div class="test" id="three">3</div>