CSS’in en güçlü özelliklerinden biri olan transform, web sayfalarındaki öğeleri döndürmemizi (rotate), ölçeklendirmemizi (scale), kaydırmamızı (translate) ve eğmemizi (skew) sağlar. Bu özellik, özellikle animasyonlar ve modern tasarım tekniklerinde sıkça kullanılır.
Bu yazıda, CSS transform özelliğini adım adım inceleyerek, her bir fonksiyonun nasıl çalıştığını öğreneceğiz.
CSS’te 3D dönüşümleri (transforms) gösteren animasyonlu görsel. rotateX, rotateY ve rotateZ gibi dönüşümlerle öğeler üç boyutlu olarak döndürülebilir.
CSS Transform Nedir?
Transform, bir HTML öğesinin görünümünü matematiksel dönüşümlerle değiştirmemizi sağlayan bir CSS özelliğidir.
Kullanabileceğimiz temel dönüşüm fonksiyonları şunlardır:
- rotate → Öğeyi döndürmek
- scale → Öğeyi büyütmek veya küçültmek
- translate → Öğeyi belirli bir yöne taşımak
- skew → Öğeyi belirli bir açıyla eğmek
| Fonksiyon | Açıklama |
|---|
| rotate(deg) | Öğeyi belirli bir derece kadar döndürür. |
| scale(x, y) | Öğeyi yatay ve dikey olarak büyütür veya küçültür. |
| scaleX(n) | Yalnızca yatay ölçeklendirme yapar. |
| scaleY(n) | Yalnızca dikey ölçeklendirme yapar. |
| translate(x, y) | Öğeyi belirli bir mesafeye taşır. |
| translateX(n) | Öğeyi yatay eksende kaydırır. |
| translateY(n) | Öğeyi dikey eksende kaydırır. |
| skew(x, y) | Öğeyi belirli bir açıyla eğer. |
| skewX(deg) | Yalnızca yatay eksende eğme yapar. |
| skewY(deg) | Yalnızca dikey eksende eğme yapar. |
Bu fonksiyonları tek tek veya birlikte kullanabiliriz.
1. Rotate (Döndürme)
Rotate, bir öğeyi belirli bir derece (°) veya açı kadar döndürmek için kullanılır.
Örnek:
.kutu {
width: 150px;
height: 150px;
background-color: steelblue;
transform: rotate(45deg);
}
Bu kod, kutuyu 45 derece döndürerek çapraz bir hale getirir. Eğer negatif bir değer girersek, dönüş saat yönünün tersine olur:
.kutu {
transform: rotate(-30deg);
}
Dönüş Noktasını Değiştirme (transform-origin)
Varsayılan olarak, rotate öğeyi merkez noktasından döndürür. Ancak, dönüş noktasını değiştirebiliriz:
.kutu {
transform: rotate(45deg);
transform-origin: top left;
}
Bu kod, kutuyu sol üst köşeden döndürerek farklı bir etki yaratır.
2. Scale (Ölçeklendirme - Büyütme ve Küçültme)
Scale, bir öğenin boyutunu artırmak veya küçültmek için kullanılır.
Örnek:
.kutu {
transform: scale(1.5);
}
Bu kod, kutuyu %150 büyütür. Eğer öğeyi küçültmek istersek, 0 ile 1 arasında bir değer kullanabiliriz:
.kutu {
transform: scale(0.7);
}
Bu da kutunun %70 boyutuna küçülmesini sağlar.
Sadece Yatay veya Dikey Ölçeklendirme (scaleX ve scaleY)
Eğer sadece yatay veya dikey olarak ölçeklendirmek istiyorsak:
.kutu {
transform: scaleX(2); /* Genişliği 2 kat artırır */
}
.kutu {
transform: scaleY(0.5); /* Yüksekliği yarıya indirir */
}
Bu özellik, özellikle buton veya resimlere genişletme/daraltma efekti eklerken kullanışlıdır.
3. Translate (Öğeyi Hareket Ettirme)
Translate, bir öğeyi x ve y eksenlerinde belirli bir mesafeye taşıma işlemidir.
Örnek:
.kutu {
transform: translate(50px, 100px);
}
Bu kod, kutuyu sağa 50 piksel ve aşağıya 100 piksel taşır.
Eğer sadece x ekseninde (yatay) hareket ettirmek istersek:
.kutu {
transform: translateX(80px);
}
Bu kod, kutuyu 80 piksel sağa kaydırır.
Benzer şekilde, y ekseninde (dikey) hareket ettirmek istersek:
.kutu {
transform: translateY(-50px);
}
Bu kod, kutuyu 50 piksel yukarıya kaydırır.
4. Skew (Öğeyi Eğme)
Skew, öğeyi belirli bir açıyla eğmek için kullanılır.
Örnek:
.kutu {
transform: skew(20deg, 10deg);
}
Bu kod:
- X ekseninde 20 derece,
- Y ekseninde 10 derece eğim verir.
Eğer sadece yatay eksende eğmek istersek:
.kutu {
transform: skewX(15deg);
}
Benzer şekilde, dikey eksende eğmek istersek:
.kutu {
transform: skewY(-10deg);
}
Bu özellik, dinamik ve modern tasarımlar oluştururken oldukça kullanışlıdır.
5. Birden Fazla Transform Kullanımı
Tüm bu dönüşümleri birleştirerek kullanabiliriz. Bir öğeyi hem döndürüp hem hareket ettirip hem de büyütebiliriz.
Örnek:
.kutu {
transform: rotate(30deg) translateX(100px) scale(1.2);
}
Bu kod:
- 30 derece döndürür,
- 100 piksel sağa taşır,
- %20 büyütür.
Özellikle animasyonlarla birlikte kullanıldığında, transform ile çok daha etkileyici görsel efektler oluşturulabilir.
Özet: CSS Transform Kullanırken Nelere Dikkat Etmelisiniz?
- Transform, bir öğenin içeriğini de etkiler.
- Döndürdüğünüzde veya ölçeklendirdiğinizde, içindeki yazılar veya butonlar da etkilenir.
- Transform-origin ile dönüş noktasını değiştirebilirsiniz.
- Öğeyi tam ortadan döndürmek yerine, köşeden döndürmek farklı görseller oluşturmanıza yardımcı olur.
- Birden fazla transform efekti bir arada kullanılabilir.
- rotate, scale ve translate gibi özellikleri bir arada kullanarak dinamik efektler oluşturabilirsiniz.
- Negatif değerler de kullanılabilir.
- Örneğin,
rotate(-45deg) kodu, öğeyi saat yönünün tersine 45 derece döndürür.
- Animasyonlarla birlikte daha güçlü hale gelir.
transition ve animation ile birlikte kullanıldığında daha akıcı ve etkileyici geçişler oluşturabilirsiniz.
CSS transform özelliği, öğeleri sadece statik olarak konumlandırmak yerine, daha dinamik ve etkileşimli bir hale getirmenizi sağlar. Eğer web sayfalarınıza hareket katmak istiyorsanız, transform kesinlikle öğrenmeniz gereken bir özelliktir.