how to rotate text in css3

आप भी दिखाएं तारीख को रोटेट टेक्स्ट के रूप में बिना फोटोशाप के अपने ब्लॉग पर |

जैसा कि आप बाईं तरफ दिखाई दे रहे चित्र में देख रहे हैं, इस तरह के तारीख को आपने विभिन्न वैबसाईट पर लगा देखा होगा | आप भी इसे अपने ब्लॉग पर इस्तेमाल कर सकते हैं, वो भी बिना फोटोशाप की सहायता के इस तरह के | इस effect को ब्लॉग पर प्रदर्शित करना बहुत आसान है | आज की पोस्ट में आप जानेगे कि इस तरह का effect कैसे उत्पन्न किया जाता है ? इस प्रभाव को देखने के लिए ब्राउजर के नये संस्करण का इस्तेमाल करें |

इस प्रकार के इफेक्ट के लिए तारीख को HTML Mode में निम्न प्रकार से लिखें |

<div><div class="example-date">
<span class="example-day">25</span> 
<span class="example-month">Dec.</span> 
<span class="example-year">2012</span>
</div></div>

CSS कोड निम्न प्रकार से लिखें |

<style>
.example-date {
font-family: 'Arial Black', helvetica, arial; 
  background-color:#228600;
  width:80px;
  float:left;
  margin-left:10px;
  padding:45px 12px 0px 5px;
  position:relative;
  color:#fff;border-radius:5px;
  
}
.example-date .example-day {
  font-size:45px;
  left:0px;
  line-height:45px;
  position:absolute;
  top:0;
  padding:0px 12px 0 10px;
}
.example-date .example-month {
  font-size:23px;
  text-transform:uppercase;
  padding:0px 0px 20px -20px;
}
.example-date .example-year {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display:block;
  position:absolute;
  right:-20px;
  top:25px;
  font-size:25px;
}
</style>

लाइव डैमो आप नीचे देख सकते हैं

25 Dec. 2012