Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML5 ve CSS3 eğitim setinin 36. dersi olup, iki boyutlu dönüşümler konusunu ele almaktadır.
- Videoda 2D dönüşümlerin temel komutları detaylı şekilde anlatılmaktadır. Eğitmen önce normal bir div ve transform class'ı olan bir div oluşturarak başlıyor, ardından translate, rotate, scale, skew, skewY ve matrix fonksiyonlarını kod örnekleri üzerinden gösteriyor. Bu fonksiyonlar ile nesnelerin konumlandırma, döndürme, boyutlandırma, eğilme ve bükülmesi gibi dönüşüm işlemlerinin nasıl yapılacağı açıklanmaktadır.
- Ayrıca tarayıcı uyumsuzluğunu gidermek için Internet Explorer ve Safari için özel kod ayarları da gösterilmektedir. Video, 2D dönüşümlerin temel kavramlarını öğrenmek isteyenler için faydalı bir kaynaktır.
- 00:09HTML ve CSS Eğitim Seti Tanıtımı
- HTML 5 ve CSS 3 eğitim setinin 36. dersinde iki boyutlu dönüşümler ele alınacak.
- İki div oluşturuldu, birine "normal", diğerine "transform" classı atandı.
- Bir class'a birden fazla class ismi atanabilir.
- 00:57Normal Div Tanımlama
- Normal div için genişlik 400 piksel, yükseklik 150 piksel, arka plan rengi ve siyah noktalı çerçeve belirlendi.
- Div'e marjin ve padding değerleri verilerek dış ve iç boşluklar ayarlandı.
- Normal div'in görünümü beyazlaştırıldı.
- 02:11Transform Translate Kullanımı
- Translate, XY düzleminde nesneyi konumlandırma işlemi yapar.
- Translate(x,y) formatında kullanılır, x değeri sağa, y değeri aşağıya kaydırma yapar.
- Tarayıcı uyumsuzluğunu gidermek için Internet Explorer ve Safari için özel kodlar kullanılır.
- 03:57Translate Kullanımı Örnekleri
- Translate(100px, 100px) ile nesne 100 piksel sağa ve 100 piksel aşağıya kaydırılır.
- Eksi değerler kullanılarak nesne yukarı ve sola kaydırılabilir.
- Translate ile nesne eski konumuna göre yeni bir konum belirlenebilir.
- 05:38Transform Rotate Kullanımı
- Rotate, nesneyi saat yönünde veya saat yönünün tersine döndürme işlemi yapar.
- Rotate(20deg) ile nesne saat yönünde 20 derecelik bir açıyla döndürülür.
- Rotate ile nesne döndürme işlemi için açı değeri belirtilir.
- 07:37Döndürme İşlemleri
- Döndürme işlemi (rotate) ile nesneler saat yönünde veya saat yönünün tersine döndürülebilir.
- Döndürme işlemi, nesnenin konumunu değiştirmek için kullanılır.
- 08:19Ölçeklendirme İşlemleri
- Ölçeklendirme (scale) işlemi, bir nesnenin boyutunu büyütmek veya küçültmek için kullanılır.
- Scale iki değer alır: genişlik ve yükseklik için ayrı değerler verilebilir.
- Ölçeklendirme işlemi piksel seviyesinde değil, kat seviyesinde gerçekleşir.
- Ölçeklendirme işlemi, nesnenin ortasından başlayarak büyüme veya küçülme gerçekleşir.
- 10:55Eğme İşlemleri
- SQX ve SQY kodları, nesneyi x ve y koordinatlarında eğmek için kullanılır.
- SQX, nesneyi x düzleminde eğmek için kullanılır ve eksi değer verildiğinde sağa, artı değer verildiğinde sola eğilir.
- SQY, nesneyi y düzleminde eğmek için kullanılır ve eksi değer verildiğinde aşağıya, artı değer verildiğinde yukarıya eğilir.
- SQ kodu, hem x hem y düzleminde eğme işlemi yapmak için kullanılır.
- 14:42Matrix Kullanımı
- Matrix, altı parametre alarak ölçeklendirme, eğme ve konumlandırma işlemlerini birleştirir.
- Matrix'te ilk iki parametre genişlik ve yükseklik için ölçeklendirme değerlerini, üçüncü ve dördüncü parametreler eğme değerlerini belirtir.
- Beşinci ve altıncı parametreler, nesnenin eski konumuna göre x ve y koordinatlarında ötelenmesini sağlar.