Text Rotation in CSS
Course- CSS3 >
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>