- Konu sahibi
- #1
CSS
Basit bir örnek:
Bu kural kutuyu görsel olarak 40 piksel sağa taşır ve 8 derece döndürür. Kutunun gerçek yerleşim alanı ise normal akıştaki konumundan hesaplanır.
Birden fazla fonksiyon yazıldığında aralarında boşluk kullanılır:
Birleştirilmiş dönüşümlerde fonksiyon sırası sonucu değiştirir; örneğin döndürüp sonra taşımak ile önce taşıyıp sonra döndürmek aynı konumu üretmez. Bu nedenle taşıma, döndürme ve ölçekleme sırasını değiştirerek sonucu kontrol etmek gerekir. Aynı öğede iki ayrı
Normal non-replaced inline kutulara, örneğin sıradan bir span öğesine transform uygulanmaz. Gerekirse uygun öğeyi inline-block yapın. Ayrıca none dışındaki transform değeri yeni yığılma bağlamı ve içindeki absolute/fixed öğeler için referans kapsayıcı oluşturabilir.
Kartın üzerine gelindiğinde hafifçe yükselmesi için tam ve küçük bir örnek:
Uygulamak için:
Başarılı sonuç, kartın yerleşimdeki komşularını itmeden hareket etmesidir. Hiçbir değişiklik görmüyorsanız seçicinin doğru öğeyi hedeflediğini, CSS dosyasının yüklendiğini ve başka bir
Dönüş ve ölçekleme varsayılan olarak öğenin merkezine göre yapılır. Başlangıç noktasını değiştirmek için
Bu örnekte öğe sol orta noktasını sabit kabul ederek döner.
transform, bir HTML öğesinin ekrandaki konumunu, boyutunu, dönüş açısını veya eğimini değiştiren özelliktir. En önemli farkı, bu görsel dönüşümün çoğu durumda normal belge akışını değiştirmemesidir. Yani bir kutuyu translateX() ile sağa taşıdığınızda, diğer öğeler genellikle kutunun ilk konumuna göre yerleşmeye devam eder.Basit bir örnek:
Kod:
.kutu {
width: 120px;
height: 80px;
background: steelblue;
transform: translateX(40px) rotate(8deg);
}Bu kural kutuyu görsel olarak 40 piksel sağa taşır ve 8 derece döndürür. Kutunun gerçek yerleşim alanı ise normal akıştaki konumundan hesaplanır.
transform nasıl çalışır?
transform tek başına bir işlem adı değil, bir veya daha fazla dönüşüm fonksiyonu alan bir CSS özelliğidir. En sık kullanılan fonksiyonlar şunlardır:| Fonksiyon | Etkisi | Örnek |
|---|---|---|
translate() | Öğeyi yatay veya dikey taşır | translate(20px, 10px) |
scale() | Öğeyi büyütür veya küçültür | scale(1.1) |
rotate() | Öğeyi döndürür | rotate(15deg) |
skew() | Öğeyi eksenlerde eğerek yamultur | skew(10deg) |
Birden fazla fonksiyon yazıldığında aralarında boşluk kullanılır:
Kod:
.kart {
transform: translateY(-8px) scale(1.03) rotate(1deg);
}Birleştirilmiş dönüşümlerde fonksiyon sırası sonucu değiştirir; örneğin döndürüp sonra taşımak ile önce taşıyıp sonra döndürmek aynı konumu üretmez. Bu nedenle taşıma, döndürme ve ölçekleme sırasını değiştirerek sonucu kontrol etmek gerekir. Aynı öğede iki ayrı
transform bildirimi kullanırsanız genellikle ilk bildirim korunmaz; sonraki bildirim öncekinin yerini alır. Birden fazla dönüşüm gerekiyorsa bunları tek bildirimin içinde birleştirin.Normal non-replaced inline kutulara, örneğin sıradan bir span öğesine transform uygulanmaz. Gerekirse uygun öğeyi inline-block yapın. Ayrıca none dışındaki transform değeri yeni yığılma bağlamı ve içindeki absolute/fixed öğeler için referans kapsayıcı oluşturabilir.
Uygulanabilir bir hover örneği
Kartın üzerine gelindiğinde hafifçe yükselmesi için tam ve küçük bir örnek:
Kod:
<article class="kart">Dönüşüm uygulanan örnek kart</article>
<style>
.kart {
width: min(100%, 220px);
box-sizing: border-box;
padding: 20px;
background: white;
border: 1px solid #ccc;
transition: transform 180ms ease;
}
.kart:hover {
transform: translateY(-6px) scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
.kart { transition: none; }
.kart:hover { transform: none; }
}
</style>Uygulamak için:
- Kartı HTML içinde
class="kart"ile işaretleyin. - Yukarıdaki CSS'yi stil dosyanıza veya ilgili
stylebölümüne ekleyin. - Sayfayı açıp imleci kartın üzerine getirin.
- Kartın görsel olarak hafifçe yukarı çıkmasını kontrol edin.
Başarılı sonuç, kartın yerleşimdeki komşularını itmeden hareket etmesidir. Hiçbir değişiklik görmüyorsanız seçicinin doğru öğeyi hedeflediğini, CSS dosyasının yüklendiğini ve başka bir
transform kuralının bildirimi ezmediğini kontrol edin. transition yalnızca geçişi yumuşatır; dönüşümü gerçekleştiren asıl kural :hover içindeki transform bildirimidir.transform-origin ve yerleşim sınırları
Dönüş ve ölçekleme varsayılan olarak öğenin merkezine göre yapılır. Başlangıç noktasını değiştirmek için
transform-origin kullanılır:
Kod:
.kapak {
transform-origin: left center;
transform: rotate(12deg);
}Bu örnekte öğe sol orta noktasını sabit kabul ederek döner.
transform-origin: top left; gibi değerlerle bir kapının menteşe çevresinde dönmesine benzer sonuçlar oluşturabilirsiniz.transform öğenin normal akıştaki genişlik ve yüksekliğini değiştirmez. Ölçeklenen bir öğe komşusunun üzerine taşabilir; döndürülen veya taşınan öğe de kapsayıcının dışına çıkabilir. Bu nedenle önemli arayüzlerde taşma durumunu, tıklama alanını ve dar ekran görünümünü ayrıca test edin. Metni yalnızca konumlandırmak için transform kullanmak yerine, mümkünse uygun yerleşim sistemi olan grid veya flex kurallarını tercih edin.Kaynaklar
Sık sorulan sorular
transform ile margin veya position arasındaki temel fark nedir?
margin ve çoğu yerleşim kuralı belge akışını etkileyebilir. transform ise ağırlıklı olarak son görsel sunumu değiştirir; bu yüzden animasyon ve hover efektlerinde daha uygun olabilir.transform ile öğeyi tamamen gizleyebilir miyim?
scale(0) öğeyi görsel olarak sıfır boyuta indirebilir; ancak bu, öğenin erişilebilirlik ağacından veya etkileşim mantığından mutlaka kaldırıldığı anlamına gelmez. Gizleme amacı varsa kullanım senaryosuna uygun olarak display, visibility veya erişilebilirlik yaklaşımını ayrıca değerlendirin.