CSS Dersleri #40 - Transform Kullanımı ve 2 Boyutlu Dönüşümler

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.
#WebProgramlama derslerimizin devamı olan Başlangıçtan İleri Seviyeye #CSS Dersleri ile #HTML kodlarınızı daha şık bir hale dönüştürecek ve göz alıcı web siteleri oluşturabileceksiniz.
Kodlama Vakti Kanalına Hoşgeldiniz !
Abone Olmayı Unutmayın🔔
► Abone Ol : / @kodlamavakti
► Ders Linki : kodlamavakti.com/css/2-boyutl...
► CSS Dersleri : kodlamavakti.com/css/
► Sıfırdan İleri Seviyeye HTML Dersleri : • HTML Dersleri - Sıfırd...
► 2 Saatte CSS Öğrenin ! : • 2 Saatte CSS Öğrenin !...
www.kodlamavakti.com
Kodlama Vakti ekibi olarak , programlamanın herkes tarafından öğrenilebilir olduğunu takipçilerimize benimsetmek olup , kanalımızda ki eğitimler özenle hazırlanmaktadır ve tamamen ücretsizdir! Vakit Kodlama Vaktidir !
Eğitimlerimizin size yararlı olduğunu düşünüyor ve beğeniyorsanız videoyu beğenmeyi , kanalımıza abone olmayı unutmayın.
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);
}