Thursday, July 7, 2011

Rotate css3

Cascading Style Sheets (CSS) is the language of Web design, and the next generation of CSS design properties are just chomping at the bit to be released.

Today i show you how to rotate text in Css3




<div class="current-date">
<span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>
<style type="text/css">
  .cureent-date
   {
    background-color: red;
    float: right;
    margin-left: 10px;
    padding: 45px 5px 0;
    position: relative;
   }
   .current-date .day
   {
    font-size: 45px;
    left: 5px;
    line-height: 45px;
    position: absolute;
    top: 0;
   }
   .current-date .month
   {
    font-size: 25px;
    text-transform: uppercase;
   }
   .current-date .year
   {
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    display: block;
    position: absolute;
    right: -5px;
    top: 15px;
   }  
   
  </style>

No comments:

Post a Comment