Css Transform Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te transform özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Transform özelliği ile bir html etiketi üzerinde döndürme, boyutlandırma, eğme gibi işlemleri  gerçekleştirebiliriz.Bu işlemleri 2D (2 boyutlu) ve 3D (3 boyutlu) olmak üzere 2 farklı şekilde yapabiliyoruz.Şimdi sırasıyla bu işlemleri nasıl yapabileceğimize bakalım.

1 – Translate Yöntemi : Bir html etiketinin, X, Y ve Z ekseninde konumunu değiştirmek için kullanılır. 

       ► translateX : X eksenindeki konumunu değiştirmek için

       ► translateY : Y eksenindeki konumunu değiştirmek için

       ► translateZ : Z eksenindeki konumunu değiştirmek için

       ► translate : X ve Y eksenlerindeki konumunu değiştirmek için kullanılır.Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.

       ► translate3d : X, Y ve Z eksenlerindeki konumunu değiştirmek için kullanılır.Birinci parametre X ekseni, ikinci parametre Y ve üçüncü parametre Z ekseni için uygulanır.

Dikkat : Vereceğimiz değerler negatif olabilir.Negatif olduğunda tam tersi yönde hareket eder.

3 adet <div> etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

2 – Rotate Yöntemi : 2 boyutlu kullanıldığında, html etiketini saat yönünde veya tam tersi yönde döndürmek için kullanılır.3 boyutluda ise döndürme işlemi 3 boyutlu olacak şekilde uygulanır.

       ► rotateX : Html etiketini, 3 boyutlu olarak X ekseninde döndürür.

       ► rotateY : Html etiketini, 3 boyutlu olarak Y ekseninde döndürür.

       ► rotateZ : Html etiketini, 3 boyutlu olarak Z ekseninde döndürür.

       ► rotate : Pozitif değer verildiğinde, html etiketini 2 boyutlu olarak saat yönünde döndürür.Negatif değer verildiğinde, html etiketini 2 boyutlu olarak saat yönünün tersine döndürür.

Dikkat : Vereceğimiz değerler negatif olabilir.Negatif olduğunda saat yönünün tersine döner.

4 adet <div> etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

3 – ScaleYöntemi : Bir html etiketini vereceğimiz oranlar ölçüsünde büyütmek veya küçültmek için kullanılır. 

       ► scaleX : Genişliği belirtilen oranda büyütmek veya küçültmek için

       ► scaleY : Yüksekliği belirtilen oranda büyütmek veya küçültmek için

       ► scale : Genişliği ve yüksekliği belirtilen oranda büyütmek veya küçültmek için kullanılır.Birinci parametre genişlik için, ikinci parametre yükseklik için uygulanır.

2 adet <div> etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

4 – Skew Yöntemi : Bir html etiketinin, X ve Y ekseninde belirtilen derece kadar eğilmesini sağlar. 

       ► skewX : X eksenindeki eğilmeyi sağlar.

       ► skewY : Y eksenindeki eğilmeyi sağlar.

       ► skew : X ve Y eksenlerindeki eğilmeyi sağlar.Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.

3 adet <div> etiketi oluşturalım ve div’lerin üzerine gelindiğinde uygulamalı olarak görelim.

Birde bu özellikleri birlikte nasıl kullanabileceğimize bakalım.Bir <div> etiketi oluşturalım ve div’in üzerine gelindiğinde uygulamalı olarak görelim.

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
transform

36.0

4.0 -webkit-

10.0

9.0 -ms-

16.0

3.5 -moz-

9.0

3.2 -webkit-

23.0

15.0 -webkit-

12.1

10.5 -o-

Bu resimde tarayıcıların 2D (2 Boyutlu) transform özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını ve özelliklerin ön ekler ile birlikte kullanıldığında, hangi versiyondan itibaren sorunsuz çalıştığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Dikkat : Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.Örneğin,

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 24 – Transition Kullanımı

Sonraki : Css Dersleri 26 – Animation Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +