scale Fonksiyonu
scale fonksiyonu bir öğeyi ölçeklendirir:
onu birkaç kat büyütür veya küçültür. Ölçeklendirme,
transform-origin
özelliği ile belirlenen nokta etrafında gerçekleşir.
Virgülle ayrılan bir veya iki parametre alabilir. Eğer iki parametre varsa - ilk parametre yatay ölçeklendirmeyi, ikincisi ise dikey ölçeklendirmeyi belirler. Eğer parametre tek ise, hem yatay hem de dikey ölçeklendirmeyi aynı anda belirler.
Parametrelerin değeri tam sayı veya ondalıklı sayı olabilir. Eğer 1'den büyükse -
öğe büyür, eğer küçükse (örneğin, 0.5) - öğe küçülür. 1 değeri verilirse -
hiçbir şey değişmez (bu, varsayılan değerdir).
Sözdizimi
cssseçici {
transform: scale(bir veya iki sayı);
}
Örnek
Kutunun üzerine gelindiğinde her iki eksende 1.5 kat ölçeği büyütelim:
html<div id="elem">lorem ipsum</div>css#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
Результат:
Örnek
Her iki eksende 2 kat küçültelim:
html<div id="elem">lorem ipsum</div>css#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
Результат:
Örnek
X ekseninde 2 kat büyütelim:
html<div id="elem">lorem ipsum</div>css#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
Результат:
Örnek
Y ekseninde 2 kat büyütelim:
html<div id="elem">lorem ipsum</div>css#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
Результат: