Web tasarım kursumuzun,CSS derslerinin,22.bölümünü işlemekteyiz.Herkese başarılar dilerim.

CSS3 – 3D Transformlar ve Transition

CSS3, 3D transformları kullanarak öğelerinize şekil vermenize olanak sağlar.

Bu bölümde transformlar hakkında şu konu başlıklarına değineceğiz:

rotateX
rotateY
rotateZ

RotateX() Methodu

Rotatex() methodu bir öğeyi x ekseni boyunca istenilen derecede döndürmek için bizlerin kullanımına sunulmuştur.

Kullanımı ise şu şekildedir:

web-tasarim-css-dersleri

RotateY() Methodu

RotateY() methodu tahmin edebileceğiniz üzere HTML öğelerini Y ekseni boyunca verilen değerler doğrultusunda çevirecektir.

Kullanımı şu şekildedir:

web-tasarim-css-dersleri

RotateZ() Methodu

RotateZ() methodu tıpkı rotateX ve rotateY methodlarında olduğu gibi HTML öğelerimizi Z ekseni yönünde verilen değer derecesinde döndürecektir.

Ve kullanımı ise şu şekildedir:

web-tasarim-css-dersleri

CSS3 – Transition

CSS3’te transition, HMTL öğelerinin daha dinamik ve kullanşlı olması konularında bizlere büyük katkı sağlamaktadır.

Transition en çok menu tasarımlarında ve hover özelliklerinin kullanım alanlarında bizlere katkı sağlamaktadır.

Biraz sonra vereceğim örnekler ile ne demek istediğimi daha kolay şekilde anlayabileceğinizi umuyorum.

Transition Geçişleri Nasıl Kullanılır?

Bir transition uygulamak için en az 2 şeyi tanımlamanız gerekmeketedir:

Transition uygulamak istediğiniz CSS öğesi
Uygulanan transition’un geçiş süresi

Eğer bir geçiş süresi tanımlanmamışsa verilen efekt geçişi çalışmayacaktır.Çünkü varsayılan olarak süre 0 sn gelir ve bu da geçişi fark edebilmemiz için çok kısa bir süredir.

Aşağıda kodları verilen örnekete bir <div> öğesine 100px genişlik ve 100px yükseklik verilmiştir ve 2 saniyelik birde geçiş efekti süresi verilmiştir.

web-tasarim-css-dersleri

Geçiş efektimizin, div’in üzerine gelince çalışması için bir özelliğe ve ayrıca birde değere ihtiyaç vardır.

Şimdi bir kullanıcı fare ile div’in üzerine gelince div’in width özelliğinin var olan değerden hover ile verilen değere kadar genişlemesi için gereken kodları sizler ile paylaşıyorum:

web-tasarim-css-dersleri

Bu kodları doğru bir biçimde uyguladığınız zaman fare ile div’in üzerine gelince div’in width değeri vermiş olduğumuz geçiş süresince 300px’e kadar genişleyecek ve fareyi div üzerinden çektiğimiz zaman yine verdiğimiz geçiş süresince geri eski haline(width:100px;) haline gelecektir.

Birden Fazla Özelliği Değiştirme

Web tasarımlarımızın daha dinamik ve daha gösterişli olmalarını sağlamak için bazen sadece width değerine transition vermek yetersiz kalabiliyor.

Bu nedenle transition özelliğini sadece 1 tane değeri değiştirmek için değil istediğimiz kadar değeri değiştirebilmek için kullanabiliriz.

Hemen bir örnek vererek ne demek istediğimizi kanıtlamış olalım:

web-tasarim-css-dersleri

Geçişin Hız Türünü Belirleme

Transitionlarda geçiş hızlarını ve geçiş tarzlarını değiştirebilme fırsatımızda yine CSS3’ün nimetlerinden birisidir.

Nedir bunlar gelin hep beraber bir göz atalım:

red – Yavaş ile başlayıp varacağı yere kadar hızlanıp,ardından tekrar yavaşlayan bir geçiş efektidir
linear – Baştan sona kadar aynı hızda devam eden geçiş efektidir
ease-in – Yavaş bir başlanıgç ile gideceği yere varan geçiş efektidir
ease-in-out – Yavaş bir şekilde varacağı yere giden geçiş efektidir
cubic-bezier(n,n,n,n) – Kendi değerlerinizi bu özellikte verebilmenizi sağlar

Aşağıdaki örnekte farklı geçiş hızlarının kullanıldığı CSS dosyasını göstermekteyiz.