CSS變換矩陣

我用下面的CSS規則做一個簡單的H2元素上的轉變，只有文本里面：CSS變換矩陣

-moz-transform: matrix(0, -1, 1, 0, 130px, 118px); 
-webkit-transform: matrix(0, -1, 1, 0, 130px, 118px);

它將按預期在Firefox;我在Safari/Windows和Chrome/Windows中完全不工作：H2保持原位。我在做錯了什麼或在Windows下的這兩個瀏覽器中CSS轉換不活躍？

來源

2009-11-07 Kaze no Koe

Screenshot http://i33.tinypic.com/2nhnl7p.png

有一些類型的實現，但它肯定打破。

如果我刪除了px，我可以至少渲染它（它似乎不會渲染它們或將其視爲有效的CSS），但它不會讓屏幕像Firefox一樣向下滾動。雖然（沒有px），它指向框架中的一個位置，它會顯示。去除px似乎對位置沒有任何影響，這很好。

來源

2009-11-07 20:49:09 tom

我並不意味着是粗魯，但截圖是非常小，我甚至不明白你在說什麼。抱歉。 – 2009-11-08 02:42:45

http://i33.tinypic.com/2nhnl7p.png - 直接鏈接到圖像。基本上 -webkit變換：矩陣（0，-1，1，0，130，118）; 作品 -webkit-transform：matrix（0，-1，1,0,130px，118px）; 沒有。我不知道爲什麼。 WebKit還假定最後兩個參數是像素，所以您可以獲得與Firefox相同的渲染。 – tom 2009-11-08 08:20:57

哦！好的，非常感謝！ – 2009-11-09 09:37:52

的MDC docs是相當清楚的：

注：蛤蚧（火狐）接受tx和ty的長度值。 Safari（WebKit）和Opera目前支持tx和ty的無單位數字。

冗長的文章，解釋the logic of the matrix後，布倫丹·肯尼的結論是，必須

「增加單位E和F的火狐（這並不真正使任何意義，但現在：精細）。」

對於計算機來說，這是正確的 - 因爲線性轉換在技術上與矩陣的其他實體沒有區別。但這是不公平的，因爲 - 對於我們人類來說 - 線性翻譯的價值是合乎邏輯的，並且沒有其他好方法讓瀏覽器執行百分比計算。

希望FF實現能贏。

順便說一句，我已閱讀，但尚未測試的第三和第四值被輸入到的Webkit在順序，但在FF和IE反向。從該文檔：

-moz變換：矩陣（A，C，B，d，TX，TY）

Where a, b, c, d build the transformation matrix and tx, ty are the translate values. 
    ┌  ┐ 
    │ a b │ 
    │ c d │ 
    └  ┘

來源

2010-10-13 12:07:06 SamGoody

回答

相關問題