CSS transform Özelliği Nedir ve Nasıl Kullanılır?

CSS 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 yapabiliriz.

TRANSLATE YÖNTEMİ

Bir Html etiketinin X, Y ve Z ekseninde konumunu değiştirmek için kullanılır. 

Yapısı: transform: translate <değer> | translateX <değer> | translateY <değer> | translateZ <değer> |
Aldığı Değerler: none | <sayı>
Başlangıç Değeri: none
Uygulanabilen Elementler: Tüm elementler
Kalıtsallık:
 Yok

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.

Vereceğiniz değerler negatif sayı olabilir. Negatif olduğunda tam tersi yönde hareket edeceklerdir.

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.

Yapısı: transform: rotate <değer> | rotateX <değer> | rotateY <değer> | rotateZ <değer> |
Aldığı Değerler: none | <sayı>
Başlangıç Değeri: none
Uygulanabilen Elementler:Tüm elementler
Kalıtsallık:
 Yok

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.

SCALE YÖNTEMİ

Bir Html etiketini vereceğimiz oranlar ölçüsünde büyütmek veya küçültmek için kullanılır. 

Yapısı: transform: scale <değer> | scaleX <değer> | scaleY <değer> | scaleZ <değer> |
Aldığı Değerler: none | <sayı>
Başlangıç Değeri: none
Uygulanabilen Elementler:Tüm elementler
Kalıtsallık:
 Yok

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.

SKEW YÖNTEMİ

Bir Html etiketinin, X ve Y ekseninde belirtilen derece kadar eğilmesini sağlar. 

Yapısı: transform: skew <değer> | skewX <değer> | skewY <değer> | skewZ <değer> |
Aldığı Değerler: none | <sayı>
Başlangıç Değeri: none
Uygulanabilen Elementler:Tüm elementler
Kalıtsallık:
 Yok

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.

CSS transform özelliği konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.

https://yazilimdelisi.com/category/web-gelistirme/css/

Sosyal Medya Hesaplarımız

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: