CODEWITHSUNDEEP
firefoxcsstransform
Mithun Sreedharan
Mithun Sreedharan

Reputation: 51292

How to use scale with -moz-transform?

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

Upvotes: 5

Views: 32652

Answers (3)

Chatoxz
Chatoxz

Reputation: 141

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

Upvotes: 9

Davorama
Davorama

Reputation: 76

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.

Upvotes: 3

Mathias Bynens
Mathias Bynens

Reputation: 149754

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>

Upvotes: 9

Related Questions