CSS矩阵动画问题

Question

我最近试图创建一些矩阵动画.但我注意到一些奇怪的东西.以下代码在Firefox,Safari和Chrome上的工作方式不同:

@-moz-keyframes matrix
{
    from 
    { 
       -moz-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
       -moz-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

@-webkit-keyframes matrix
{
    from 
    { 
        -webkit-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
        -webkit-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

有没有办法解决这个问题？

Answer 1

这似乎只是 Gecko 和 Webkit 渲染函数的方式不同matrix，这就是为什么它们仍然具有实验性供应商前缀。我说没有明确的方法来“修复”这个问题，因为这完全取决于渲染引擎，所以您可能只需要修改这些值即可获得等效的结果。