-moz-transform

quickle / 2010-03-19 04:16:36   

can anyone tell me why this isn't working in safari?

http://caseymcgonagle.com/

i'm happily messing with skewing as you can tell (if you are using firefox), but safari no worky. Isn't that what webkit is for?

arsondpi / 2010-03-19 08:34:54   

-moz-transform is meant for mozilla browsers, -webkit-transform for webkit browsers, opera css3 commands are still buggy and ...oops - no ie equivalent. How odd... ;-)
Still there's js solutions for these things...

I suggest you search the web for css3 transform and cover as many browsers as you can...

blameme / 2010-03-19 09:26:12   
  1. -webkit-transform: rotate(90deg);
  2. ¬†¬†¬†¬†-moz-transform: rotate(90deg);
  3. ¬†¬†¬†¬†-o-transform: rotate(90deg);
  4. ¬†¬†¬†¬†transform: rotate(90deg);
  5.     }

IE 9 is set to support "transform:" But who knows when that will finally see the light of day.

quickle / 2010-03-19 18:30:53   

thanks you guys. I began trouble shooting this by removing all the mozilla transform stuff I added and safari was still broken. it turned out to be something I had messed up with the java mouseover image on the main page. the transform functions are working in safari now.

this article is where I got the code from and from my understanding it says that safari uses the webkit functions:

https://developer.mozilla.org/en/CSS/-moz-transform

thanks again.

LeslieOA / 2010-03-21 02:29:02   

@arsondpi: - To give IE some credit, there is an equivalent of sorts using the proprietary filter property. It's been supported since IE5.5.

The syntax (which is a math-plebs nightmare) would be something like: -

  1. #menu {
  2.    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
  3.         M11=#.################, M12=#.################,
  4.         M21=#.################, M22=#.################);
  5. } 

...you can even declare it the standards complaint way with the -ms vendor extension (IE8+): -

  1. -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
  2.         M11=#.################, M12=#.################,
  3.         M21=#.################, M22=#.################)";

@quickle: - Read up on the Matrix Filter to achieve the same effect in IE.
There's also a decent article (with a helpful matrix calculator) if you choose to add IE support).

As mentioned by blameme, don't forget to add the following to support all capable browsers: -

  1. transform: matrix(1, 0.1, 0, 1, 0, 0);

Peace.

arsondpi / 2010-03-21 10:29:26   

...omg...! this is just to make it work with ie?

Anyhow - thanks Leslie...

Vaska A / 2010-03-21 10:50:29   

Who supports IE6 anymore? Let alone 5.5.

People need to be told it's time to upgrade if things aren't working...it's that simple.

restre / 2010-07-28 17:00:27   

I call a vote on NO MORE IE (no matter what version)

cheers!

This thread has been closed, thank you.