CSS ile Bir Nesneyi veya Yazıyı Döndürmek

Tarih: 29 Ağustos 2010 Yazar: Aycan Doğanlar | 1.751 kez okundu

Merhaba :) Bu yazımda sizinle işe yarar bir css kodu paylaşmak istedim. Bu kod sayesinde herhangi bir yazıyı, başlığı, v.b bir şeyi 90º, 270º gibi değerler ile döndürerek estetik bir şekile dönüşmesini sağlayabilirsiniz. Örnek olarak, yatay ve klasik bir arama formu yerine sitenizin en sağuna dayalı şekilde duran dikey bir menü göze çok daha hoş ve yaratıcı gelecektir. Bu teknikle oluşturulan bir arama formuna çoğu kişide rastlanmadığından ilgiyi sitenize çekebilirsiniz.

Bu css kodu IE 6 dahi diğer tüm tarayıcılarda destekleniyor.

Kullanacağımız kod;


filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);

“filter..” ile başlayan değer IE için yazılıyor.

Ben kendi isteğime göre bir tarih bölümü şeklinde hazırladım. Yıl göstergesini de dikey olarak ayarladım.

Etiketler:

Bu yazı için 8 yorum yapılmış.

Oyunlar diyor ki:

29 Ağustos 2010, 02:25

Browser uyumluluklarını da belirtirseniz çok faydalı olur.. Hala ie6 kullanan %10 civarında kullanıcı olduğu düşünülürse sanırım bir süre daha kullanmak mümkün olmayacak..
Aycan Doğanlar diyor ki:

29 Ağustos 2010, 10:27

Yazıda belirtmiştim:

“Bu css kodu IE 6 dahi diğer tüm tarayıcılarda destekleniyor.”
Burak Dülgar diyor ki:

30 Ağustos 2010, 17:47

Güzel bir anlatım olmuş Aycan teşekkürler :)
Fırat Göksel diyor ki:

31 Ağustos 2010, 01:59

Teşekkürler işime yarayacaktır =)
osaman diyor ki:

31 Ağustos 2010, 15:34

güzel bir teknik:) tnx
Slayer diyor ki:

01 Eylül 2010, 14:24

Hoşuma gitti bu bak teşekkürler kullanırım :)
Emrah diyor ki:

01 Eylül 2010, 23:04

Teşekkürler. Çok farklı bir kullanım. Faydalı oldu.
Cemil diyor ki:

27 Aralık 2011, 02:40

Merhaba, Bir web sitesinde, üzerine fare geldiğinde logoyu 360 derece döndürme kodu arıyorum. Arkadaşlar yardımcı olursa sevinirim. Teşekkürler.