矩陣縮放轉換不起作用

我必須使用轉換矩陣來爲元素的transform：縮放設置動畫效果。矩陣縮放轉換不起作用

我想規模從0到1 如果我使用下面的代碼能夠正常工作：

.container { 
    width: 200px; 
    height: 100px; 
    background: yellow; 
    transform: scale(0); 
    transition: transform 1s; 
} 
.container.open { 
    transform: scale(1); 
}

https://jsfiddle.net/w4kuth78/1/

如果我用的是矩陣本身，它是不工作。

.container { 
    width: 200px; 
    height: 100px; 
    background: yellow; 
    transform: matrix(0, 0, 0, 0, 0, 0); 
    transition: transform 1s; 
} 
.container.open { 
    transform: matrix(1, 0, 0, 1, 0, 0); 
}

https://jsfiddle.net/m7qpetkh/1/

難道我做錯了什麼或者這只是不工作？我想知道，因爲它不適用於Chrome和Firefox ...

console_log調試輸出說，在從0到1的縮放比例中，矩陣也從矩陣（0,0,0,0， 0,0）到矩陣（1,0,0,1,0,0）。

編輯：

總混亂......如果我改變了基質的scaleX和scaleY值至0.1或0.01它的工作原理...哇

來源

2015-05-29 yacon

很奇怪！看起來像其他矩陣轉換值也很難做動畫https://jsfiddle.net/zvgcg0o0/。無論出於何種原因，IE11都可以處理您的演示以及我剛纔沒有遇到的問題。 –

你真的回答了你自己的問題。 0.001儘可能小，並且仍然有過渡。我不確定零爲什麼禁用動畫的確切原因，但它確實如此。 –

看起來不存在這樣的錯誤報告，它可能值得提交一個。如果它確實不是一個錯誤（我不確定它不會如何），那麼您至少可以讓工程師澄清其行爲：https://code.google.com/p/chromium/issues/entry – Adam

當動畫或過渡變換，變換函數列表必須被內插。具有相同名稱和相同參數數量的兩個轉換函數在沒有以前的轉換的情況下進行數字插值。計算的值將具有相同數量參數的相同變換函數類型。

特殊規則適用於rotate3d（），matrix（），matrix3d（）和perspective（）。矩陣（），矩陣3d（）和透視（）的轉換函數首先被轉換爲4x4矩陣並進行插值。如果其中一個插值矩陣是奇異的或不可逆的（如果其行列式爲0），則不會渲染變形的元素，並且所使用的動畫函數必須根據相應動畫規範的規則退回到離散動畫。

然後在矩陣（0,0,0,0,0,0）的情況下，很明顯，對於規模4X4結果矩陣是英文單

學分http://www.w3.org/TR/css3-2d-transforms/

來源

2015-06-07 06:47:28

矩陣縮放轉換不起作用

回答

相關問題