CSS3 rotation
Please note that the right rotation looks exactly like the left rotation in IE lesser than 9
HTML
<table class="cmr-wrapper" width="100%">
<tr>
<td class="rotate-left">
<div class="try">Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit 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;
}