Merhaba,

Bu dersimizde Css3 2d uygulamalarından en çok kullanılan 3 uygulamayı işleyeceğiz. Bunlar ;

Rotate

Mevcutta bulunan elementimizi kendi ekseni etrafında belirlenmiş bir derecede döndürmeye yarayan komutumuzdur.

Kullanım şekli ;

transform:rotate(40deg);

şeklindedir. Buna birde animasyon ekleyelim. (bu konuyu ileriki bir derste detaylandıracağım). Aslında daha önceki derslerde eklemem gereken bir bilgiyi şimdi ihtiyaç duyduğumdan veriyorum. Css3 ileri ve yeni bir sistem olduğundan henüz tüm browserlar tarafından düzgün bir biçimde desteklenmiyor.

Yani css3 te kodlama yaparken kesinlikle browserların kodları seçeceğini bilmemiz gerekli. Bu durumda ben şu an chrome kullanıyorum ve chrome css3 kodlarını okumak için bazı özelliklerin başına -webkit- komutunu istemektedir.

Yukarıda yazmış olduÄŸum kodu çalıştırdığımızda kırmızı backgroundlu divimizin saat yönünde döndüğünü görmekteyiz. Saatin tersi yönünde döndürmek istersek dereceyi – vermemiz yeterli olacaktır.

Rotate konusunu tamamladık şimdi scale işlemimize geçebiliriz.

Scale (Uzatma / Kısaltma);

Scale özelliği atandığı elementi vereceğimiz katsayı doğrultusunda uzatmaya ya da kısaltmaya yarayan özelliğimizdir.

Kullanım Şekli :

transform : scale(1,2);  parametrelerimizden ilki width ikincisi ise heigth değeridir ve bu örnekte olacak olan width sabit kalıp heigth 2 katı kadar olacaktır. Dikkat edilmesi gereken her scale parametresi en başta verilen width ve heigth değeri üzerinden çalışmaktadır.

Yukarıda yaptığım gibi bunuda detaylı ve animasyonlu bir örnek ile inceleyelim.

Dikkatinizden kaçmamıştır. Yine -webkit- kullandım 🙂 scale için verdiğim parametreler en başta tanımladığımız width ve heigth değerlerinin katları olarak işlem yaptılar. Eğer bu kodları notepad açıp içine yapıştırır ve o notepad sayfasını .html uzantılı olarak kaydedip çalıştırırsanız nasıl çalıştığını görebilirsiniz.

Şimdi bu başlık altındaki son konumuza geçeliö.

Skew (Eğme Bükme geometrik şeklini değiştirme);

Skew ile mevcutta bulunan elementimizi eğip büker ve geometrik şeklini değiştirebiliriz.

Kullanım şekli :

transform : skew(45deg,45deg); şeklindedir. 2 adet parametre alır. Bu parametrelerden ilki y ekseninde ikinci x ekseninde oluşacak olan kaymayı sağlamaktadır.Diğer bir değişle ilk parametreyi kullanarak y eksenini (dikey olan kısımı) verdiğimiz açı doğrultusunda bükeriz. İkinci parametre ile de y eksenini.

Hemen detaylı örneğimizi yapalım. (Tabi ki yine animasyonlu)

Bu örnekte gördüğünüz üzere skew ile divimizi incelttik , uzattık ve kare olan şeklimizi tamamen bozup geometrik enteresan bir şekle soktuk.

Bir sonraki dersimizde artık göz aşinalığımız olan animasyonlara giriş yapacağız.

İyi Günler Dilerim,