Question

我在使用firefox 26.0中css3的关键帧动画旋转一个简单的div-container（矩形）时遇到了问题。 rect应该一直逆时针旋转，但它不会！



<html>
<head>
<style> 
    div {
        position: absolute;
        width:100px;
        height:100px;
        background-color:red;
        border:1px solid black;
    }

    @keyframes mcTest {
        0.0%  { transform: matrix( 0.4, -0.2,  0.2,  0.4, 0, 0); } 
        40.0% { transform: matrix(-0.8, -0.1,  0.1, -0.8, 0, 0); } 
        60.0% { transform: matrix(-0.9,  0.1, -0.1, -0.9, 0, 0); } 
        100.0%{ transform: matrix( 1.0,  0.2, -0.2,  1.0, 0, 0); } 
    }
</style>
</head>
<body>
<div style="animation: 5s linear 0s normal none infinite mcTest;"></div>
</body>
</html>

<html> <head> <style> div { position: absolute; width:100px; height:100px; background-color:red; border:1px solid black; } @keyframes mcTest { 0.0% { transform: matrix( 0.4, -0.2, 0.2, 0.4, 0, 0); } 40.0% { transform: matrix(-0.8, -0.1, 0.1, -0.8, 0, 0); } 60.0% { transform: matrix(-0.9, 0.1, -0.1, -0.9, 0, 0); } 100.0%{ transform: matrix( 1.0, 0.2, -0.2, 1.0, 0, 0); } } </style> </head> <body> <div style="animation: 5s linear 0s normal none infinite mcTest;"></div> </body> </html>

当2.和3.矩阵参数（x-skew和y-skew）的符号发生变化时，异常行为发生在40％和60％之间。我已经认识到，这种行为取决于1.参数。它必须接近-0.85才能出现问题。

任何帮助或提示将不胜感激！：）

CSS3矩阵旋转翻转旋转方向

0 个答案: