できたことはできましたが、IEのはビットマップイメージを回転しているのでがたがたになってしまいました。
参考: DXImageTransform.Microsoft.Matrix
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Text rotation</title>
<style type="text/css">
.example-date {
position: relative;
font-family: Helvetica, Arial;
}
.day {
position: absolute;
top: 0;
left: 0;
font-size: 32pt;
}
.month {
position: absolute;
top: 32pt;
left: 0;
font-size: 18pt;
}
.year {
position: absolute;
top: 10pt;
left: 32pt;
font-size: 12pt;
display: block;
-webkit-transform: rotate(-30deg);
}
.year, x:-moz-broken {
position: absolute;
top: 8pt;
left: 32pt;
font-size: 12pt;
-moz-transform: rotate(-30deg);
}
</style>
<!--[if IE]>
<style type="text/css">
.year {
filter:progid:DXImageTransform.Microsoft.Matrix(
M11=0.866,
M12=0.5,
M21=-0.5,
M22=0.866,
Dx=1.0,
Dy=1.0,
FilterType='bilinear',
sizingMethod='auto expand'
);
top: 4pt;
left: 32pt;
}
</style>
<![endif]-->
</head>
<body>
<div class="example-date">
<span class="day">31</span>
<span class="month">JULY</span>
<span class="year">2009</span>
</div>
</body>
</html>
