CSS3 İLE TRANSFORM DÖNÜŞTÜRME

CSS3 İLE TRANSFORM DÖNÜŞTÜRME

Tarhi : 06-02-2020 06:30:00 | Yazar : ÇAĞLAR BOSTANCI

CSS3 İLE TRANSFORM MATRİX

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) X ve Y etrafında 2D dönüşüm uygular. Dönüşüm için altılı bir matris değerler (a,b,c,d,e,f) kullanılır.

CSS3 İLE TRANSFORM ROTATE

rotate(açı olarak değer) x ve y ekseni doğrultusunda saat yönünde döndürme işlemi yapar. İşlem bir matris [cos(açı)sin(açı)-sin()cos(açı)0 0] karşılık gelir.

CSS3 İLE TRANSFORM SCALE KULLANIMI

scale(Sx,Sy) X ve Y doğrultusunda 2D ölçülendirme işlemi yapar. Sy değeri verilmediğinde Sx eşit olduğu varsayılır.

scaleX x ekseni yönünde ölçeklendirmeyi (uzamsı ya da kısalması) sağlar. Aldığı değer elementin uzunluğu ile çarpan durumundadır. Örneğin elementin eni 100 ise ve değeri verildiyse uzama 200 olarak elde edilir.

scaleY y ekseni yönünde ölçeklendirmeyi (uzması ya da kısalması) sağlar. Aldığı değer elementin uzunluğu ile çarpan durumundadır.

CSS TRANSFORM YANSITMA ÖZELLİĞİ

YANSIMA ÖRNEK 2

CSS TRANSFORM SKEW KULLANIMI

skew X ve Y eksenleri doğrultusunda verilen açı kadar eğim verir. İlk parametre zorunludu, ikinci parametre verilmediğinde y ekseni üzerinde eğrilik oluşmaz.

SkewX Kullanımı

CSS3 TRANSFORM skewY KULLANIMI

CSS3 TRANSFORM TRANSLATE KULLANIMI

translate[tx|ty] vektörü ile özel bir 2D görünümü sağlar. ty değeri verilmezse 0 olarak kabul edilir.

CSS3 TRANSFORM TRANSLATEX-Y KULLANIMI

TRANSLATEX-Y KULLANIMI

Reklam Alanı