CSS’ye Yazıyı Döndürme İşlemi

Bu yazımda sizlere CSS ile nasıl yazı döndürüldüğünü göstermeye çalışacağım. Safari, Firefox ve Internet Exlorer’da (5.5 ve üstü) yapılan testlere göre sorunsuz bir biçimde çalışmaktadır.

HTML kodlarımız şu şekilde olmalı:

1 2 3 4 5

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

Şimdi de Css kodlamamızı yapalım. Firefox için aşağıdaki kodları ekliyoruz:

1 2	-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);

Önemli Not: Burada önemli bir husus var, yeri geldiği için söyleyeyim. Döndürmek istediğiniz elemana display:block atamasını mutlaka yapmalısınız.

İşimiz bitiyor…Internet Explorer için bir satır daha eklememiz gerekiyor. Internet Explorer’daki BasicImage filtresini kullanarak bu döndürme işlemini rahatlıkla yapabiliriz.

1	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Herşey bitti. Tarayıcılarda nasıl göründüğüne bakalım: