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

this solved my problem across all browsers. My text was getting clipped after rotation, the position, top and padding properties helped me out. width of 100% is important. filter and ms transform is imp for IE

#rotationCSS    { 
    width:100%;
    font-size:1.3em;
    font-weight:bold;
    float:right;  
    -webkit-transform: rotate(90deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(90deg)!important;  /* IE 9 */
    -o-transform: rotate(90deg);  /* Opera 10.50-12.00 */
    transform: rotate(90deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
    position: absolute;
    top: 20px;
    padding: 35px 20px 0px 10px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

Answer 2

I've achieved the effective result in all browsers I was targetting by splitting the CSS rules up by browser support, and applying classes using conditional comments to deal with IE.

The big showstopper was the fact that IE9 would rotate the element visibly as a result of DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, sizingMethod='auto expand') but wouldn't rotate the interactable bounding box. I've read since posting this question that IE9 has reduced support for filters, and so I've set it up so that for IE7/8 it uses the filter, and for IE9 it uses -ms-transform.

Less elegant, but now it works.

Answer 3

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

<div class="rotated">
    <span>Element which is longer than it is wide...</span>
</div>

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/