CSS3 – 2D Dönüşümler

Web tasarım kursumuzun CSS derslerine 2D dönüşümlerle devam ediyoruz. Herkese başarılar dilerim.

CSS3’teki transform özelliği öğelerimizi taşımamızı, döndürmemizi, ölçeklendirmemizi ve eğriltmemizi sağlar.

Bu özellik bir öğenin şeklini ve konumunu dönüştürür.

CSS3, 2D ve 3D dönüşümleri destekler.

CSS3 2D Dönüşüm

Bu dersimizde aşağıdaki yöntemler hakkında sizleri bilgilendireceğiz:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• skew()

Not: Eski derste örnekler Internet Explorer 9 ve eski Safari sürümleri için -ms-transform ve -webkit-transform önekli satırlarla da yazılıyordu. Günümüz tarayıcıları standart transform yazımını desteklediği için bu satırlara gerek yoktur.

translate() Yöntemi

translate() yöntemi bir öğeyi, X ekseni ve Y ekseni için verilen değerlere göre geçerli konumundan taşır.

Aşağıdaki örnek <div> öğesini şu anki konumundan 50 piksel sağa ve 100 piksel aşağı taşır:

div {
    transform: translate(50px, 100px);
}

rotate() Yöntemi

rotate() yöntemi bir öğeyi saat yönünde veya saat yönünün tersine, belirlenen açı kadar döndürmemizi sağlar.

Yukarıdaki örnekte bir <div> öğesinin saat yönünde 20 derece döndürülmüş hâlini görüyorsunuz.

Kaynak kodları şu şekildedir:

div {
    transform: rotate(20deg);
}

Negatif değerler öğemizi saat yönünün tersine döndürür.

Aşağıdaki örnek <div> öğesini saat yönünün tersine 20 derece döndürür:

div {
    transform: rotate(-20deg);
}

scale() (Ölçek) Yöntemi

scale() yöntemi bir öğenin boyutunu büyütmemize veya küçültmemize yardımcı olur.

Aşağıdaki örnekte <div> öğesini orijinal genişliğinin 2 katına ve orijinal yüksekliğinin 3 katına çıkardık.

div {
    transform: scale(2, 3);
}

Aşağıdaki örnek <div> öğesini orijinal genişlik ve yüksekliğinin yarısına küçültür.

div {
    transform: scale(0.5, 0.5);
}

skewX() Yöntemi

skewX() yöntemi bir öğeyi verilen açıya göre X ekseni boyunca eğriltir.

Aşağıdaki örnek <div> öğesini X ekseni boyunca 20 derece eğriltir.

div {
    transform: skewX(20deg);
}

skewY() Yöntemi

skewY() yöntemi seçilen bir öğeyi verilen açıya göre Y ekseni boyunca eğriltir.

Aşağıdaki örnek <div> öğesini Y ekseni boyunca 20 derece eğriltir.

div {
    transform: skewY(20deg);
}

skew() (Eğiklik) Yöntemi

skew() yöntemi bir öğeyi X ve Y ekseni boyunca verilen açı değerlerine göre eğriltir. Aşağıdaki örnek öğeyi X ekseninde 20, Y ekseninde 10 derece eğriltir.

div {
    transform: skew(20deg, 10deg);
}

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.