Embedded Files
hazırlayan:Semanur Dumlu
CSS ile Boyut-Konum Dönüşümleri
CSS dönüşümleri, öğeleri taşımanıza, döndürmenize, ölçeklemenize ve eğmenize olanak tanır.
Bu bölümde aşağıdaki CSS özelliğini öğreneceksiniz:
transform
CSS transform özelliği ile aşağıdaki 2B dönüştürme yöntemlerini kullanabilirsiniz:
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
translate(kaydırılmış) Yöntemi
Yöntem translate(), bir öğeyi mevcut konumundan hareket ettirir (X ekseni ve Y ekseni için verilen parametrelere göre).
Aşağıdaki örnek, <div> öğesini geçerli konumundan 50 piksel sağa ve 100 piksel aşağı taşır:
Örnek
div {
transform: translate(50px, 100px);
}
rotate(döndürülmüş) 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 saat yönünde 20 derece 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);
}
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ına çıkarır:
Örnek
div {
transform: scaleY(3);
}
Aşağıdaki örnek, <div> öğesini orijinal yüksekliğinin yarısına indirir:
Örnek
div {
transform: scaleY(0.5);
}
Scale(genişlik ve yükseklik) 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ı kadar 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ına çıkarır:
Örnek
div {
transform: scaleX(2);
}
Aşağıdaki örnek, <div> öğesini orijinal genişliğinin yarısı kadar azaltır:
Örnek
div {
transform: scaleX(0.5);
}
skew() Yöntemi
Yöntem, skew()bir öğeyi X ve Y ekseni boyunca verilen açılarla eğirir.
Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece ve Y ekseni boyunca 10 derece eğirir:
Ö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ğirir:
Örnek
div {
transform: skew(20deg);
}
skewX(yamulmuş) Yöntemi
Yöntem, skewX()bir elemanı X ekseni boyunca verilen açı kadar eğirir.
Aşağıdaki örnek, <div> öğesini X ekseni boyunca 20 derece eğirir:
Örnek
div {
transform: skewX(20deg);
}
skewY() Yöntemi
Yöntem, skewY()bir elemanı Y ekseni boyunca verilen açı kadar eğirir.
Aşağıdaki örnek, <div> öğesini Y ekseni boyunca 20 derece eğirir:
Örnek
div {
transform: skewY(20deg);
}
Page updated
Report abuse