CSS3 rotation

Please note that the right rotation looks exactly like the left rotation in IE lesser than 9

by naveen

HTML

<table class="cmr-wrapper" width="100%">
    <tr>
        <td class="rotate-left">
            <div class="try">Lorem ipsum dolor sit amit</div>
        </td>
        <td class="main-content">
            
        </td>
        <td class="rotate-right">
            <div class="try">Lorem ipsum  dolor sit amit</div>
        </td>
    </tr>
</table>

CSS

.cmr-wrapper {
    color:#BE473F;
    table-layout: fixed; 
    height:600px;
    width: 800px;    
}
.main-content{
    border: 5px solid #BE473F;   
}
.main-content{
    display: table-cell;
    vertical-align: middle;    
}
.rotate-left .try {
    
-moz-transform: rotate(-90deg);  /* FF3.5+ */
    -o-transform: rotate(-90deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
    white-space: nowrap;
    }
.rotate-right .try{
  -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
          transform: rotate(90deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
    white-space: nowrap;
}
.rotate-left,.rotate-right {
    zoom: 1;
    position:relative;
    display:table-cell;
    margin: 0;
    vertical-align:middle;
    width: 50px;
    
    }