JSFiddle Demo (tested fine in IE8/9/10, Firefox, Chrome, Safari, Opera)
Key points
- It's simpler to create a horizontal tab bar and rotate all of it at once, rather than rotating each tab item separately.
- Avoid using both the
BasicImage filter and -ms-transform, because the rotation would be applied twice in IE9. The BasicImage filter applies to IE8/9. -ms-transform applies to IE9. transform applies to IE10. Using a combination of the BasicImage filter and transform covers IE8/9/10.
- A transformed element occupies the same space in the layout that it occupied before the transformation (the horizontal space across the width of the screen), even though it's displayed at a different location. In this version of the demo, the layout space it occupies is shown in blue. One way to avoid having this unwanted space taken up in the layout is to give the element absolute position, so that it doesn't occupy any space in the layout. Another option is to give the next element a negative top margin (to "consume" the layout space of the transformed element).
HTML
<div class="wrapper">
<ul id="tab">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
CSS
.wrapper {
position: relative;
width: 488px;
}
#tab {
position: absolute;
height: 52px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-90deg) translate(-488px, 0px);
-moz-transform: rotate(-90deg) translate(-488px, 0px);
-o-transform: rotate(-90deg) translate(-488px, 0px);
transform: rotate(-90deg) translate(-488px, 0px); /* IE10 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE8/9 */
...
}
#tab li {
float: left;
width: 120px;
height: 50px;
border: 1px solid #000;
}
#tab li a {
display: block;
padding: 10px;
...
}
...