How to use scale with -moz-transform?

Question

Any body has a Good example showing how to use scale with -moz-transform ?

score 9 · Accepted Answer · answered Jul 20 '10 at 10:21

9

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>

answered Jul 20 '10 at 10:21

Mathias Bynens

137,577
52
212
242

dos the html5 doc type is must? – Mithun Sreedharan Jul 20 '10 at 10:31
@Mithun: Nope, the HTML5 DOCTYPE is not required for this example to work. A browser that understands the proprietary `-moz-transform` CSS property is. – Mathias Bynens Jul 20 '10 at 18:44
one problem you should be aware of, that FF is scaling from the middle, while all other browesrs using the 'zoom' css attribute scale from top-right. – Nir O. Feb 11 '12 at 16:02

score 8 · Answer 2 · edited Apr 06 '22 at 13:48

8

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 */
}

edited Apr 06 '22 at 13:48

Wilt

37,062
11
138
192

answered Jun 07 '12 at 15:52

Chatoxz

111
1
8

It is recommended to place the undisputed value last, see also: https://stackoverflow.com/a/7080674/1697459 – Wilt Apr 06 '22 at 13:48

score 3 · Answer 3 · answered Jul 09 '14 at 17:04

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.

answered Jul 09 '14 at 17:04

Davorama

66
5

How to use scale with -moz-transform?

3 Answers3

Linked