Css "transform" rotate Döndürme Fonksiyonu Çalışmıyorsa Çözümü

Bazen bir karakteri yada font tipi iconların 360 derece dönen tüm versiyonları bulunmaz. Bunun için bunları döndürme ihticayı hasıl olduğunda css de bulunan transform ifadesini kullanırız.

Örneğin:

 li i{
 	-webkit-transform:rotate (10deg);
 	-moz-transform:rotate (10deg);
 	-o-transform:rotate (10deg);
 }

 veya

 li i:before{
 	-webkit-transform:rotate (10deg);
 	-moz-transform:rotate (10deg);
 	-o-transform:rotate (10deg);
 }

 

Sorunun Çözümü

span , i ,a , b gibi html elemanları varsayımsal olarak display:inline; özelliğine ayarlıdır. Bu yüzden bu rotate komutları işe çalışmaz.
Transform rotate ile karakteri döndürememe sorununun çözümünü o elemanların display özelliğini inline-block yada block şeklinde ayarlar isek çalışacaktır.

 li i{
 	display:inline-block;
 	-webkit-transform:rotate (10deg);
 	-moz-transform:rotate (10deg);
 	-o-transform:rotate (10deg);
 }

 veya

 li i:before{
 	display:inline-block;
 	-webkit-transform:rotate (10deg);
 	-moz-transform:rotate (10deg);
 	-o-transform:rotate (10deg);
 }

 	 veya 90 derece için
 	display:inline-block;
 	filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);
 	-moz-transform:rotate (10deg);
 	-o-transform:rotate (90deg);
 	-ms-transform:rotate (90deg);
 	transform:rotate (90deg);
 	-webkit-transform:rotate (90deg);

 

Kolay gelsin...