Davut KARA

Bilişim Sistemleri Mühendisi

Bu blog, 5 yıl önce, bilişim ve diğer konularda hakkında, makalelerime yer vermek amacı ile açılmıştır.

Css3 İle Fırıldak Menüler.

CSS3 nimetlerinden bir kez daha yararlanıyoruz. Css3 ün bu nimetiyle beraber, artık fırıl fırıl dönen menüler veya fırıl fırıl dönen resimler hatta daha fazlası tüm html elementlerini fırıl fırıl döndürebileceksiniz. Bu işlemi yapmak için css3 ün transform özelliğinin rotateZ söz dizimini kullanacağız.

Bu söz dizimi ile nesneleri döndürebiliyorsunuz. Eğer sabit bir değer belirlerseniz sayfa açıldığında dönmüş oluyor ama hover metodu ile kullandığınızda canlı olarak önünüzde belirlediğiniz açıyla dönüş yapıyor ve mouse unuzu geri çektiğinizde eski konumuna dönüyor. Yukarıdaki pencerede örnek olarak koydum orda inceleyebilirsiniz.

Css Transform Rotatez Özelliği

Kullanım şekli:
transform:rotateZ(10deg);
Burda yazan 10 değeri saat yönünde 10 derece döndürmesini belirtiyor.
Not: Unutmayınız her tam sayının negatif değeri vardır -10 yazarsanız saat yönünün tersinde 10 derece dönecektir.

Fırıldak Menü

Yapmanız gereken tek şey aşağıdaki kodları menülerinize göre ayarlayıp css dosyanızın içine yapıştırmak.
Örnek olarak Menu yazan yere menu:li yazmanız gerekiyor ben menü tarzının liste menü olup olmadığını bilemem bu yüzden oraya sadece menu adı yazdım.
360 yazan kısımları değiştirerek kaç derece dönmesi gerekeceğini ayarlayabilirsiniz.


Menu adı {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
-moz-transition: -moz-transform 2s ease-in-out;
-o-transition: -o-transform 2s ease-in-out;
transition: transform 2s ease-in-out;
}
Menu adı:hover {
-webkit-transform: rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
}

İyi kullanmalar..