Merhaba arkadaşlar, Bu dersimizde CSS3’ün transition ve transform özelliklerini kullanarak dönen kutu nasıl yapabiliriz onu gösterdim.

Konuyu en basit ve sade haliyle anlatmak istedim. Bu derste bazı vurgulanması gereken yada açıklanması gereken özellikler var onlar;


  • Perspective : Türkçe karşılığı bakış açısı anlamına gelmektedir. CSS3’te 3 boyutlu işlemler için çok önemlidir. Perspective, 3 boyutlu olan bir görüntüyü 2 boyuta indirmeye yarayan bir özelliktir.



  • bacface-visibility:hidden : 3 boyutlu elemanın arka tarafının gösterilip gösterilmeyeceğini ayarladığımız bir özelliktir. ” hidden ” dediğimiz zaman arka tarafı gizlemiş oluyoruz.



  • preserver-3d : Bu özellik bir elemana 3 boyutluluk özelliğini katmak istiyorsak kullanmamız gerekir. Yani bu kod alt elemanlar ana kapsayıcı eleman gibi 3 boyutluluk özelliği kazansın diye kullandığımız bir koddur.



Bu açıklamalardan sonra aslında çok basit bir yapının olduğunu göreceksiniz. Dersin kaynak dosyasını da eklemeyi unutmuyorum, umarım beğenirsiniz.

https://www.youtube.com/watch?v=63wbaGWmQZ0


Kaynak Dosyayı İndir


Youtube'de izle