代码之家 › 专栏 › 技术社区 › Kaze no Koe

CSS转换矩阵

css3 webkit css

3

Kaze no Koe · 技术社区 · 15 年前

我使用以下CSS规则对简单的h2元素进行转换,只对其中的文本进行转换:

-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转换不活动?

2 回复 | 直到 11 年前

1

2

tom 15 年前

有一些实现,但它肯定是坏的。

如果我删除了px,我至少可以让它渲染(它似乎不与它们一起渲染,或者将其视为有效的css),但它不会像firefox那样让屏幕向下滚动到它。但将它指向帧中的一个位置(不带px),它会显示出来。移除像素对位置也没有任何影响,这很好。

2

Josh Crozier HBP 11 年前

这个 MDC docs 非常清楚:

注意:gecko(firefox)接受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 â
   â     â