Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de 2 Boyutlu Dönüşümler ve Transform Kullanımı Konusunu öğreneceğiz.
CSS'de transform özelliği, elementleri taşımanıza, döndürmenize, ölçeklendirmenize ve eğmenize olanak tanır.
CSS transform özelliği ile aşağıdaki 2B dönüştürme metotlarını kullanabilirsiniz:
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
CSS translate() kullanımı
CSS'de translate() metodu, bir elementi X ve Y eksenleri üzerinde hareket ettirmek için kullanılır.
Aşağıdaki örnek, div etiketinin mevcut konumundan 50 piksel sağa ve 100 piksel aşağıya doğru konumlanmasını sağlar :
div {
transform: translate(50px, 100px);
}
CSS rotate() kullanımı
CSS'de rotate() metodu, bir etiketi belirli bir dereceye göre saat yönünde veya saat yönünün tersine doğru döndürmemizi sağlar.
Aşağıdaki örnek, div etiketinin 20 derece saat yönünde döndürür:
div {
transform: rotate(20deg);
}
Eğer saat yönünün tersine bir döndürme işlemi yapmak istiyorsak , negatif değerler kullanmalıyız.
Aşağıdaki örnek, div etiketinin saat yönünün tersine 20 derece döndürür:
div {
transform: rotate(-20deg);
}
CSS scale() kullanımı
CSS'de scale() metodu, bir etiketin boyutunu arttırmak veya azaltmak için kullanılır.
Aşağıdaki örnek, div etiketinin orijinal genişliğinin iki katı ve orijinal yüksekliğinin üç katı olacak şekilde artırır:
div {
transform: scale(2, 3);
}
Bir elementin orjinal boyutunun oranı 1'dir. Eğer 1 den küçük bir oran girilirse bu sefer öğenin boyutu küçülecektir.
Aşağıdaki örnek, div etiketinin orijinal genişliğinin ve yüksekliğinin yarısı oranında küçültür :
div {
transform: scale(0.5, 0.5);
}
CSS scaleX() kullanımı
CSS'de scaleX() metodu, bir etiketin genişliğini artırır veya azaltır.
Aşağıdaki örnek, div etiiketinin orijinal genişliğinin iki katı olacak şekilde artırır:
div {
transform: scaleX(2);
}
CSS scaleY() kullanımı
CSS'de scaleY() metodu, bir etiketin yüksekliğini artırır veya azaltır.
Aşağıdaki örnek, div etiketinin orijinal yüksekliğinin üç katı olacak şekilde artırır:
div {
transform: scaleY(3);
}
CSS skewX() kullanımı
CSS'de skewX() metodu, bir etiketin verilen açıyla X ekseninde eğme işlemini gerçekleştirir.
Aşağıdaki örnek, div etiketinin X ekseni boyunca 20 derece eğmektedir:
div {
transform: skewX(20deg);
}
CSS skewY() kullanımı
CSS'de skewY() metodu, bir etiketin verilen açıyla Y ekseninde eğme işlemini gerçekleştirir.
Aşağıdaki örnek, div etiketinin Y ekseni boyunca 20 derece eğmektedir:
div {
transform: skewY(20deg);
}
CSS skew() kullanımı
CSS'de skew() metodu, bir etiketin verilen açılarla X ve Y ekseni boyunca eğmek için kullanılır.
Aşağıdaki örnek, div etiketinin X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğmektedir. Eğer tek açı girilirse, hem X ekseni hemde Y ekseni girilen açıyı kullanır.
div {
transform: skew(20deg, 10deg);
}
box{
transform: skew(20deg);
}
CSS matrix() Kullanımı
CSS'de matrix() metodu, tüm 2B dönüştürme metotlarını tek bir metotta kullanmamızı sağlar. Yani matrix metodu, tüm 2 boyutlu dönüştürme metotlarını bir arada kullanmamızı sağlar.
matrix() metodu, etiketleri döndürmenize, ölçeklendirmenize, taşımanıza (çevirmenize) ve eğriltmenize olanak tanıyan matematik işlevleri içeren altı parametre alır.
Parametreler aşağıdaki gibidir: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
