Сегодняшняя статья посвящена свойству css transform: scale. Вы узнаете из нее, как можно манипулировать размером элементов.
В прошлой статье я использовал футбольный пример, чтобы показать вам перемещение элементов с помощью transform. Ну что, учитывая, что статью я пишу в перерыве между полуфиналом Евро, то сегодня тоже будем манипулировать футбольным мячом:
<img class = "ball" src = "ball.png">
Ок, самому мячу я задал два стилевых класса. Первый определяет общие стили, в частности плавный переход, а второй непосредственно увеличивает или уменьшает объект:
.ball{
transition: 0.8s;
margin: 50px;
}
.scale:hover{
transform: scale(1.5, 1.5)
}
Наведите на мяч. И вообще для того, чтобы видеть все последующие трансформации, наводите курсор на мяч.
Учитывайте, что если вы увеличиваете изображение, то ухудшается его качество, что мы и увидели в данном случае. Ок, в скобках записываются два параметра. Первый — размер элемента по оси x или по вертикали, второй — по вертикали. Значение может быть от 0.01 до 100. Хотя 100 это условная цифра, может быть и больше, но я не думаю, что вам пригодятся большие значения.
Собственно, если записать так: transform: scale(1.5), то увеличение произойдет по обеим сторонам одинаково. Соответственно, вы можете легко увеличить элемент по одной стороне больше, а по второй меньше. Например, так:
.scale:hover{
transform: scale(1.5, 1.2)
}
Помимо scale есть еще scaleX и scaleY. Эти значения позволяют увеличить или уменьшить элемент лишь по одной оси. Соответственно, в скобках в таком случае записывается лишь одно значение.
.scale:hover{
transform: scaleX(1.5)
}
Тоже учитывайте, что изменяются пропорции картинки.
.scale:hover{
transform: scaleY(1.5)
}
Вот такие простейшие примеры. Соответственно, таким же образом вы можете спокойно уменьшать размеры, увеличение показано лишь для примера.
Как в css отразить элемент с помощью scale?
Напоследок покажу интересную фишку, которая позволяет отразить элемент. Для этого вы должны указать отрицательное значение, вот так:
.scale:hover{
transform: scaleX(-1)
}
Соответственно, вы можете также отразить сверху вниз, просто поменяв ось. В общем, в этой статье мы разобрали, как с помощью трансформаций менять размер элементов, а также как их можно отражать.