Text Rotation in CSS

CSS Code:
.myDate{
    width: 100px;
    height: 100px;
    display: block;
    border: 1px solid #ccc;
    font-family: verdana, Arial;
    background-color: #FAFAFA;
}
.day{
    width: 70px;
    height:50px;
    display: block;
    float: left;
    color: #777;
    font-size: 45px;
    font-weight: bold;
}
.month{
    width: 70px;
    height:50px;
    display: block;
    float: left;
    color: #666;
    font-size: 40px; 
}

.year{
    width:30px;
    height: 52;
    display:block;
    float: left;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    color: #333333;
    font-size: 31px;
    margin-top: 3px;
    font-weight: bold;
}

HTML Code:
<div class="myDate">
  <span class="day">31</span> 
  <span class="month">Jul</span> 
  <span class="year">2013</span>
</div>

Output:

31 Jul 2013

Comments
comments powered by Disqus