2010-07-20 104 views

回答

9

The MDC page you linked to实际上解释得很好。

我给你做了个快速的例子。演示:http://jsfiddle.net/SZ87b/1/代码:

<!doctype html> 
<title>-moz-transform scale example</title> 
<style> 
p { font-size: 5em; text-align: center; } 
p:hover { -moz-transform: scale(2); } 
</style> 
<p>Foo bar</p> 
+0

dos html5 doc类型是必须的吗? – 2010-07-20 10:31:34

+0

@Mithun:不,HTML5 DOCTYPE不需要这个例子的工作。理解专有的“-moz-transform”CSS属性的浏览器是。 – 2010-07-20 18:44:33

+0

您应该知道的一个问题是,FF从中间缩放,而所有其他使用'zoom'css属性的浏览器从右上角缩放。 – 2012-02-11 16:02:30

5

这里是CSS的市长浏览器 值刻度(2,4)的一个例子变换成其原始大小的两倍的宽度,并且高度的4倍其原始尺寸。

div{ 
transform: scale(2,4); 
-ms-transform: scale(2,4); /* IE 9 */ 
-webkit-transform: scale(2,4); /* Safari and Chrome */ 
-o-transform: scale(2,4); /* Opera */ 
-moz-transform: scale(2,4); /* Firefox */ 
} 
2

当使用缩放(或旋转)变换时,您可能需要设置原点。

transform-origin: top left; 

以获得您正在寻找的效果。

相关问题