CSS 2D Dönüşümleri
CSS 2D Dönüşümleri
CSS dönüşümleri, öğeleri taşımanıza, döndürmenize, ölçeklendirmenize ve eğmenize olanak tanır.
2B dönüşümü görmek için fareyi aşağıdaki öğenin üzerine getirin:
Bu bölümde aşağıdaki CSS özelliği hakkında bilgi edineceksiniz:
transform
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 2D Dönüşüm Yöntemleri
CSS transformözelliği ile aşağıdaki 2B dönüştürme yöntemlerini kullanabilirsiniz:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
İpucu: Sonraki bölümde 3B dönüşümler hakkında bilgi edineceksiniz.
translate() Yöntemi
Yöntem translate(), bir elemanı mevcut konumundan hareket ettirir (X ekseni ve Y ekseni için verilen parametrelere göre).
Aşağıdaki örnek, <div> öğesini mevcut konumundan 50 piksel sağa ve 100 piksel aşağı taşır:
Örnek
div
{
transform: translate(50px, 100px);
}
döndürme() Yöntemi
Yöntem rotate(), bir öğeyi belirli bir dereceye göre saat yönünde veya saat yönünün tersine döndürür.
Aşağıdaki örnek, <div> öğesini 20 derece saat yönünde döndürür:
Örnek
div
{
transform: rotate(20deg);
}
Negatif değerlerin kullanılması, öğeyi saat yönünün tersine döndürür.
Aşağıdaki örnek, <div> öğesini saat yönünün tersine 20 derece döndürür:
Örnek
div
{
transform: rotate(-20deg);
}
Scale() Yöntemi
Yöntem scale(), bir elemanın boyutunu artırır veya azaltır (genişlik ve yükseklik için verilen parametrelere göre).
Aşağıdaki örnek, <div> öğesini orijinal genişliğinin iki katı ve orijinal yüksekliğinin üç katı olacak şekilde artırır:
Örnek
div
{
transform: scale(2, 3);
}
Aşağıdaki örnek, <div> öğesini orijinal genişliğinin ve yüksekliğinin yarısı olacak şekilde azaltır:
Örnek
div
{
transform: scale(0.5, 0.5);
}
scaleX() Yöntemi
Yöntem scaleX(), bir öğenin genişliğini artırır veya azaltır.
Aşağıdaki örnek, <div> öğesini orijinal genişliğinin iki katı olacak şekilde artırır:
Örnek
div
{
transform: scaleX(2);
}
Aşağıdaki örnek, <div> öğesini orijinal genişliğinin yarısı olacak şekilde azaltır:
Örnek
div
{
transform: scaleX(0.5);
}
scaleY() Yöntemi
Yöntem scaleY(), bir elemanın yüksekliğini artırır veya azaltır.
Aşağıdaki örnek, <div> öğesini orijinal yüksekliğinin üç katı olacak şekilde artırır:
Örnek
div
{
transform: scaleY(3);
}
Aşağıdaki örnek, <div> öğesini orijinal yüksekliğinin yarısı olacak şekilde azaltır:
Örnek
div
{
transform: scaleY(0.5);
}
skewX() Yöntemi
Yöntem skewX(), bir öğeyi verilen açıyla X ekseni boyunca yayar.
Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece eğmektedir:
Örnek
div
{
transform: skewX(20deg);
}
skewY() Yöntemi
Yöntem skewY(), bir öğeyi verilen açıyla Y ekseni boyunca yayar.
Aşağıdaki örnek, <div> öğesini Y ekseni boyunca 20 derece eğmektedir:
Örnek
div
{
transform: skewY(20deg);
}
skew() Yöntemi
Yöntem skew(), bir öğeyi verilen açılarla X ve Y ekseni boyunca yayar.
Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğmektedir:
Örnek
div
{
transform: skew(20deg, 10deg);
}
İkinci parametre belirtilmezse sıfır değerine sahiptir. Bu nedenle, aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece eğmektedir:
Örnek
div
{
transform: skew(20deg);
}
matrix() Yöntemi
Yöntem matrix(), tüm 2B dönüştürme yöntemlerini bir araya getirir.
matrix() yöntemi, öğeleri döndürmenize, ölçeklemenize, taşımanıza (çevirmenize) ve eğriltmenize olanak tanıyan matematik işlevleri içeren altı parametre alır.
Parametreler aşağıdaki gibidir: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Örnek
div
{
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
CSS Dönüştürme Özellikleri
Aşağıdaki tablo tüm 2B dönüştürme özelliklerini listeler:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D Dönüştürme Yöntemleri
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |