Css Transform Kullanımı

Bu yazımızda 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.

TRANSLATE YÖNTEMİ

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.

 Önemli  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.

ROTATE YÖNTEMİ

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.

 Önemli  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.

SCALE YÖNTEMİ

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.

SKEW YÖNTEMİ

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.

CSS TRANSFORM ÖZELLİĞİ TARAYICI DESTEĞİ

Özellik Chrome IE Firefox Safari Opera
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.

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

Örneğin,

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link