Dönüşüm Oluşturucu
CSS dönüşüm özelliklerini görsel olarak oluşturun ve önizleyin.
CSS Transform, web öğelerini 2D veya 3D uzayda dönüştürmenize olanak tanıyan güçlü bir CSS özelliğidir. Çevirme, döndürme, ölçekleme ve eğme gibi dönüşümlerle dinamik ve etkileşimli web tasarımları oluşturabilirsiniz. Gerçek zamanlı önizleme ile istenen efektleri kolayca oluşturun.
transform: none;Dönüşüm Fonksiyonları
- • translate(x, y): translate(x, y): Öğeyi x, y miktarı kadar hareket ettirir
- • scale(x, y): scale(x, y): Öğeyi x, y oranı kadar ölçekler
- • rotate(angle): rotate(angle): Öğeyi açı kadar döndürür
- • skew(x, y): skew(x, y): Öğeyi x, y derece kadar eğirir
Kullanım İpuçları
- • Birden fazla dönüşüm fonksiyonu boşluklarla birleştirilebilir
- • Dönüşüm başlangıcını transform-origin ile değiştirin
- • Animasyon efektleri oluşturmak için transition ile kullanın
- • 3D dönüşümler için perspective özelliğini kullanın
🎯 Dönüşüm Temel Kavramları
CSS Transform, öğelerin şeklini, boyutunu ve konumunu değiştiren bir CSS özelliğidir. Normal belge akışını bozmadan öğelerin görsel dönüşümüne izin verir.
Temel sözdizimi:
transform: function(value) function(value) ...;📐 Dönüşüm Fonksiyonu Detayları
🔄 Çevir (Hareket)
- •
translate(x, y): translate(x, y): X, Y eksenleri boyunca hareket ettirir - •
translateX(x): translateX(x): Sadece X ekseni boyunca hareket ettirir - •
translateY(y): translateY(y): Sadece Y ekseni boyunca hareket ettirir - •
translate3d(x, y, z): translate3d(x, y, z): 3D hareket
transform: translate(50px, 100px);📏 Ölçekle (Yeniden Boyutlandırma)
- •
scale(x, y): scale(x, y): X, Y eksenlerini ölçekler - •
scaleX(x): scaleX(x): Sadece X eksenini ölçekler - •
scaleY(y): scaleY(y): Sadece Y eksenini ölçekler - • 1'den büyük büyütür, 1'den küçük küçültür
transform: scale(1.5, 0.8);🔄 Döndür (Döndürme)
- •
rotate(angle): rotate(angle): Z ekseni etrafında döndürür - •
rotateX(angle): rotateX(angle): X ekseni etrafında döndürür - •
rotateY(angle): rotateY(angle): Y ekseni etrafında döndürür - • Açılar için deg, rad, turn birimlerini kullanın
transform: rotate(45deg);📐 Eğme (Kaydırma)
- •
skew(x, y): skew(x, y): X, Y eksenleri boyunca eğirir - •
skewX(angle): skewX(angle): X ekseni boyunca eğirir - •
skewY(angle): skewY(angle): Y ekseni boyunca eğirir - • Paralelkenar şekline dönüştürür
transform: skew(15deg, 5deg);🎨 Dönüşüm Başlangıcı (Dönüşüm Noktası)
transform-origin özelliği dönüşüm başlangıç noktasını ayarlar. Varsayılan olarak öğenin merkezidir (%50 %50).
Anahtar kelimeler kullanarak
transform-origin: top left;Yüzdeler kullanarak
transform-origin: 25% 75%;Pikseller kullanarak
transform-origin: 10px 20px;⚡ Performans Optimizasyon İpuçları
✅ Öneriler
- • Sadece dönüşüm ve opaklığı canlandırın
- • will-change özelliğini kullanın
- • 3D hızlandırma kullanın (translateZ(0))
- • Daha iyi performans için bileşik katmanlar oluşturun
❌ Kaçınılması Gerekenler
- • Genişlik, yükseklik canlandırma
- • Sol, üst konumları canlandırma
- • Aşırı dönüşüm iç içe geçmesi
- • Gereksiz will-change kullanımı
Performans optimizasyon örneği:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 Animasyon ve Geçişler
Dönüşüm, pürüzsüz efektler oluşturmak için CSS Transition ve Animation ile kullanılabilir.
Geçiş örneği
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}Keyframe Animasyon örneği
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 Tarayıcı Uyumluluğu
CSS Transform tüm modern tarayıcılarda desteklenir, ancak eski tarayıcılar için satıcı önekleri gerekebilir.
Satıcı öneki örneği:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 Gerçek Dünya Kullanım Örnekleri
Kart üzerine gelme efekti
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}Yükleme döndürücüsü
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}Modal giriş efekti
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}Düğme tıklama efekti
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 Hata Ayıklama ve Geliştirme Araçları
Tarayıcı Geliştirici Araçları
- • Elements panelinde gerçek zamanlı düzenleme
- • Computed sekmesinde son değerleri kontrol edin
- • Performance sekmesiyle performans analizi
- • 3D Görünüm ile katman yapısını kontrol edin
Faydalı CSS Özellikleri
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 Profesyonel İpuçları
Performans İpucu
GPU hızlandırması için bileşik katmanlar oluşturmak üzere transform3d() veya translateZ(0) kullanmak, animasyon performansını önemli ölçüde artırabilir.
Erişilebilirlik İpucu
Harekete duyarlı kullanıcılar için alternatifler sağlamak üzere prefers-reduced-motion medya sorgusunu kullanın.
Tasarım İpucu
transform-origin'i doğru ayarlamak daha doğal dönüşüm efektleri oluşturabilir.
Geliştirme İpucu
CSS değişkenlerini kullanarak dönüşüm değerlerini dinamik olarak kontrol etmek, JavaScript entegrasyonunu kolaylaştırır.