CSS ile Metin Dündürme (Text Rotation with CSS3)

CSS3 ile Bir Metni Döndürmek

CSS3'ün inanılmaz derecede görsellik sunduğunu daha öncede belirtmiştim. Şimdi ise sizlere CSS3 ile bir metni nasıl döndürebileceğimizi anlatmaya çalışacağım. CSS3 ile bir metni istediğiniz derecede döndürebilirsiniz. Tek yapmanın gereken metni ne kadar döndürmek istediğinizi belirtmeniz.
Browserların CSS3'ü destekleme konusunda bazen sıkıntı yarattığını ve bunu çözmek için hangi formülleri uygulamanız gerektiğini belirtmiştim.

HTML Kodunu şu şekilde girelim

-------------------------------------------------

<div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div>

-------------------------------------------------

HTML ilefazla ile ayrıntıya girmeden ufak bir metin düzenledik. Tarih sıralamasını bilinçli olarak böyle yaptım ve virgül kullanmadım. Eğer kullansaydım tasarımın sonunda boşluklar oluşabilir ve virgülü kaldırmak gerekli olabilir. Zaten görsellik açısından virgüle gerek olmadığını da düşünüyorum.

Sıra Geldi CSS3'e

CSS'de her browserın kendisine ait olan bir formül olduğunu vurgulayarak söylüyorum. Normalde metni döndürmek için;
[transform: rotate(-90deg);]
yazmanız yeterli. Fakat diğer browserlardada çalışamsı için
-------------------------------------------------

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);

-------------------------------------------------

formüllerini kullanmalısınız.

Şİmdi yapmanız dilediğiniz spanlara verilen class lardan bi tanesini seçmek. 

Tasarım gönrüntüsü en son şu şekil olmalı:

Bu verilen örnekten tabi siz daha farklı tasarımlar çıkartabilrisiniz.