Member Avatar for Member #743490

Hey yo developers outta there.

Mine is a simple question as this:

How could I create rotation for IE? I know there's the filter function for this, but that can't rotate 45 degrees.
So, if it is necessary I change my css rotate technics, to a jQuery or something.
Now here the only problem is, that I don't find solution for jQuery div rotation, only for images.

Anybody could help me out please? It is very important since 24% of users in my country uses IE, and without rotation the page looks like s**t.

Thanks for the support :)

  • 2 Contributors
  • 6 Replies
  • 111 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by Member #743490

Dani AI

Generated

Quick summary and a drop-in solution for old IE: modern browsers already handle rotation with CSS transforms, but older IE (IE8 and below) needs the Microsoft Matrix filter. As @ardav hinted, that MSDN Matrix filter is the right tool; below is a simple jQuery function that computes the matrix for any angle (45 degrees in your case) and applies the filter.

function rotateForIE($el, deg) {
  var rad = deg * Math.PI / 180;
  var c = Math.cos(rad).toFixed(8);
  var s = Math.sin(rad).toFixed(8);

  var matrix = "progid:DXImageTransform.Microsoft.Matrix(M11=" + c +
               ", M12=" + (-s) +
               ", M21=" + s +
               ", M22=" + c +
               ", sizingMethod='auto expand')";

  $el.css({ filter: matrix, zoom: 1 });
}

// usage
rotateForIE($('#yourDiv'), 45);

Notes and troubleshooting

  • sizingMethod='auto expand' prevents clipping but will change the element size and may shift layout. Wrap the element in a container and reposition if you need it centered.
  • The Matrix filter rotates around the element origin (top-left). To simulate center-rotation, measure the new bounds after rotation and offset the element or use a wrapper and translate it.
  • IE's filter will rasterize complex content (text/images) and can look jagged. If quality is important, consider pre-rendered images for the rotated piece or a VML approach.
  • If the element seems to vanish, ensure it has layout (zoom:1 or a block/inline-block display) and try position:relative on the wrapper.
  • For animations or many elements, use a tested library/plugin to avoid edge cases; for single static rotated items the snippet above is sufficient.

Recommended Answers

All 6 Replies

Member Avatar for Member #120589

Only 24%?? If that was true of my web stats, I'd give up on IE and tell all my visitors to do the same. Bliss!

Anyway. What are you using now? Want to share your code? Does this work in FF, Chrome, Safari and Opera, but not in IE?

Member Avatar for Member #743490

Yeah @ardav exactly. only in IE don't. I simply use css's
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);

And as we can be sure:
-ms-transform:rotate(-45deg) doesn't exist... )

So I have to do it with jQuery, but uncertain how?

Member Avatar for Member #743490

I don't have nothing to do with that. As I said, I need 45 degrees rotation in IE too...

Member Avatar for Member #120589

>I don't have nothing to do with that. As I said, I need 45 degrees rotation in IE too...

Well, I'm sorry you feel like that. If you followed a link on that page, you'd find this:

http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

A universal implementation of this rotation can be seen here:

http://www.codingforums.com/showthread.php?t=141798

the filter/matrix solution is ONLY for IE, so it won't mess with any other browsers. I got it to work, there again, it's up to you if can be bothered with it.

Edited by Member #120589 because: n/a
Member Avatar for Member #743490

I still don't get it. Sorry but amn't exactly sure with js and stuff.
Could you please help me more?
For example generate the code if isn't too hard?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.