CSS transform fonksiyonları, bir HTML öğesinin şeklini, boyutunu ve konumunu, sayfa yeniden yüklenmeden değiştirmek için kullanılır. Bu fonksiyonlar, öğeleri döndürme, ölçeklendirme, taşıma (translate), eğme (skew) ve matris dönüşümleri yapma gibi işlemleri gerçekleştirebilir. Transform fonksiyonları, kullanıcı arayüzlerine dinamik animasyonlar ve etkileşimler eklemek için oldukça güçlü araçlardır.

CSS'de transform fonksiyonlarını kullanmak için transform özelliği kullanılır. İşte bazı yaygın transform fonksiyonları ve açıklamaları:

1. translate(x, y) 

Bir öğeyi belirli bir mesafe boyunca yatay (x) ve dikey (y) olarak taşır. Değerler piksel (px), em, viewport genişliği (vw) gibi çeşitli birimlerle belirtilebilir.

transform: translate(50px, 100px);

2. scale(x, y)

Bir öğenin boyutunu x yönünde ve y yönünde ölçeklendirir. scale(2, 3) öğenin genişliğini iki katına, yüksekliğini ise üç katına çıkarır. Yalnızca bir değer belirtilirse, hem x hem de y için bu değer kullanılır.

transform: scale(2); /* Hem genişliği hem de yüksekliği 2 katına çıkarır */

3. rotate(angle)

Bir öğeyi belirtilen açı kadar döndürür. Açı derece (deg), radyan (rad) veya gradyan (grad) cinsinden olabilir.

transform: rotate(45deg); /* Saat yönünün tersine 45 derece döndür */

4. skew(x-angle, y-angle)

Bir öğeyi x ve y eksenlerinde eğik (skew) yapar. Bu, öğenin şeklini eğik bir paralelograma dönüştürür.

transform: skew(30deg, 20deg);

5. matrix(a, b, c, d, e, f)

Bir öğe üzerinde genel bir 2D dönüşüm gerçekleştirir. Bu fonksiyon, ölçeklendirme, döndürme, taşıma ve eğme işlemlerinin bir kombinasyonunu sağlar.

transform: matrix(1, 0, 0, 1, 50, 50);

Transform fonksiyonları birleştirilebilir, böylece birden fazla dönüşüm tek bir transform özelliği ile uygulanabilir:

transform: rotate(45deg) translate(100px, 50px);

CSS'de matematiksel fonksiyonlar, çeşitli tasarım değerlerini dinamik olarak hesaplamak için kullanılır. Bu fonksiyonlar, CSS özelliklerine değer atarken matematiksel işlemler gerçekleştirmenize olanak tanır. CSS matematik fonksiyonları, tasarımın farklı ekran boyutlarına veya durumlara göre uyum sağlamasını kolaylaştırır ve daha esnek, bakımı kolay kodlar yazmanıza yardımcı olur. İşte CSS'de sık kullanılan bazı matematiksel fonksiyonlar:

1. calc()

Değerleri hesaplamak için kullanılır. calc() içinde toplama (+), çıkarma (-), çarpma (*) ve bölme (/) işlemleri yapılabilir. Farklı birimleri birleştirmek için mükemmeldir.

width: calc(100% - 50px);
margin-top: calc(20px + 5vh);

2. min()

Verilen değerler arasından en küçüğünü seçer. Responsive tasarımlarda, bir öğenin maksimum boyutunu sınırlarken kullanışlıdır.

Bu örnek, öğenin genişliğini viewport'ın genişliğine (100vw) veya 600px değerine kadar olan en küçük değere ayarlar.

3. max()

Verilen değerler arasından en büyüğünü seçer. Bir öğenin minimum boyutunu belirlemek için kullanılabilir.

Bu örnek, öğenin genişliğini 300px veya viewport'ın yarısına (50vw) eşit olan en büyük değere ayarlar.

4. clamp(minValue, preferredValue, maxValue)

Bir değerin belirli bir minimum ve maksimum aralıkta kalmasını sağlar. Eğer tercih edilen değer min ve max arasında ise, tercih edilen değeri kullanır. Aksi takdirde, sınır dışında kalırsa sınırlardan birini kullanır.

font-size: clamp(1rem, 2vw + 1rem, 2rem);

Bu örnek, font-size'ı en az 1rem, en fazla 2rem olacak şekilde ayarlar, ancak aradaki değer olarak 2vw + 1rem formülünü kullanır. Bu, ekran boyutuna bağlı olarak dinamik bir şekilde ayarlanan bir font boyutu sağlar.

CSS matematiksel fonksiyonları, modern web tasarımında esneklik ve duyarlılık sağlar. calc(), min(), max(), ve clamp() fonksiyonları, farklı ekran boyutları ve durumlar için uyumlu, ölçeklenebilir tasarımlar oluşturmanıza yardımcı olur. Bu fonksiyonlar sayesinde, daha dinamik ve kullanıcı odaklı web siteleri tasarlamak mümkün hale gelir.

ayrıca, pow(), sqrt() ...