演示效果截图

CSS代码

<style type="text/css">
a {
	color:#000;
}
.example-date {
  background-color:#998877;
  float:left;
  margin-left:10px;
  padding:45px 5px 0;
  position:relative;
}
.example-date .day {
  font-size:45px;
  left:5px;
  line-height:45px;
  position:absolute;
  top:0;
}
.example-date .month {
  font-size:25px;
  text-transform:uppercase;
}
.example-date .year {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  font-size:1.1em;
  background-color:#998877;
  position:absolute;
  right:0px;
  top:10px;
}
</style>

HTML代码

<h3>使用CSS旋转文本元素</h3>
<div class="example-date">
 <span class="day">31</span>
  <span class="month">July</span>
   <span class="year">2009</span>
</div>
<h3><a href="http://www.v404.cn">www.v404.cn</a></h3>