How to use scale with -moz-transform?
30,237
Solution 1
The MDC page you linked to actually explains it pretty well.
I made you a quick example. Demo: http://jsfiddle.net/SZ87b/1/ Code:
<!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>
Solution 2
here is an example of the css for the mayor browsers The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.
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 */
}
Solution 3
When using a scale (or rotate) transform you may need to set the origin.
transform-origin: top left;
to get the effect you are looking for.
Comments
-
Mithun Sreedharan almost 4 years
Any body has a Good example showing how to use scale with -moz-transform ?