Rotating Text

Rotation is a very easy effect to achieve (and can be applied to any element, not just to text). This feature has gained popularity in recent years and now can be made to work across most browsers. In order to perform a rotation, the element has to be set to display:block, so that declaration must be added to the span that you want to rotate.
The CSS syntax is simple: 
rotation: VALUEdeg;
where VALUE = the number degrees to rotate (eg. 90deg to have it appear vertically top-to-bottom; 45deg to have it display diagonally from botton right to top left; -90deg or 270deg to have it display vertically bottom-to-top etc.) Unfortunately the rotate feature does require some proprietary coding, and there is a different property needed for each of the 4 different browser types. So, for example to turn text upside down the CSS needed is: 
display: block;
-webkit-transform: rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
Upside Down Text

A Practical Application

So, what's it good for (besides making your site visitors crane their necks to read)? Well, how about using rotation to display today's date in a fancy calendar "graphic"?

First off, you'll need to use Javascript in your HTML to get the date to display and you'll also need to put a span around each part of the date (month, day, year).

<div class = "datebook">
   <span class = "month">
     <script type = "text/javascript">
        var m_names = new Array("January", "February", "March",
         "April", "May", "June", "July", "August", "September",
         "October", "November", "December");
        var d = new Date() ;
        var curr_month = d.getMonth();
        document.write (m_names[curr_month]);
    </script>
   </span>
   <span class = "day">
      <script type = "text/javascript">
          var d = new Date() ;
          document.write (d.getDate());
       </script>
   </span>
   <span class = "year">
       <script type = "text/javascript">
           var d = new Date() ;
           document.write (d.getFullYear());
       </script>
   </span>
   </div>
Then, use CSS to style and rotate the text (in this case it's the .year class). 
.datebox .month
   {
      display: block;
      text-align: center;
      font-size: 30px;
      line-height: 30px;
      padding: 2px 0;
      background-color: #1e528c;
      text-transform: uppercase;
   }
.datebox .day
   {
      display: block;
      text-align: center;
      font-size: 80px;
      line-height: 80px;
      font-weight: bold;
      padding: 2px 24px 2px 0;
   }
.datebox .year
   {
      display: block;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform:rotate(90deg);
      filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
      position: absolute;
      right: 0;
      bottom: 9px;
      font-size: 32px;
   }
Previous Next