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
