Rotating clickable elements in IE8+

Question

I am attempting to rotate clickable elements in IE8 using the proprietary MS filter DXImageTransform.Microsoft.Matrix. I\'ve calculated the matrix correctly and

Answer 1

I tried to change a bit your markup, wrapping your text inside an extra element, in this way

    Element which is longer than it is wide...

then I accordingly changed the style (note, I've also changed height: auto, because some letters were cut)

.rotated { 
    border: 1px red solid;
    height: auto; /* required for IE7 to perform rotation */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand'); 
}

span { display: block; }

and javascript, so the click event is attached on span

jQuery(function($) { 
    $('.rotated span').click(function() { 
        alert('You clicked within the original boundary'); 
    }); 
});

In IE8 you can click also on the bottom area not covered by characters.

See the fork: http://jsfiddle.net/wdbK8/