Функция scale
Функцията scale мащабира елемент:
увеличава или намалява го няколко
пъти. Мащабирането се извършва около
точка, зададена от свойството transform-origin.
Може да приема един или два параметъра, изброявани чрез запетая. Ако параметрите са два - първият параметър задава мащабиране по хоризонтала, а вторият - по вертикала. Ако параметърът е един той задава мащабиране по хоризонтала и вертикала едновременно.
Стойността на параметрите е цяло или дробно
число. Ако то е по-голямо от 1 - елементът се увеличава,
ако е по-малко (например, 0.5) - елементът
се намалява. Ако се зададе 1 - нищо няма да се промени
(това е стойността по подразбиране).
Синтаксис
селектор {
transform: scale(едно или две числа);
}
Пример
При посочване на блока ще увеличим мащаба в 1.5
пъти по двете оси:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1.5);
}
:
Пример
Намаляваме мащаба в 2 пъти по двете оси:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(0.5);
}
:
Пример
Увеличаваме мащаба в 2 пъти по оста X:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(2, 1);
}
:
Пример
Увеличаваме мащаба в 2 пъти по оста Y:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: scale(1, 2);
}
:
