Бешеный конкурс!
5:42
Автор: Рубрика: HTML и CSS Комментариев нет

CSS. Transform scale или увеличение элементов

Сегодняшняя статья посвящена свойству 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)
}

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Помимо scale есть еще scaleX и scaleY. Эти значения позволяют увеличить или уменьшить элемент лишь по одной оси. Соответственно, в скобках в таком случае записывается лишь одно значение.

.scale:hover{
transform: scaleX(1.5)
}


Тоже учитывайте, что изменяются пропорции картинки.

.scale:hover{
transform: scaleY(1.5)
}

Вот такие простейшие примеры. Соответственно, таким же образом вы можете спокойно уменьшать размеры, увеличение показано лишь для примера.

Как в css отразить элемент с помощью scale?

Напоследок покажу интересную фишку, которая позволяет отразить элемент. Для этого вы должны указать отрицательное значение, вот так:

.scale:hover{
transform: scaleX(-1)
}

Соответственно, вы можете также отразить сверху вниз, просто поменяв ось. В общем, в этой статье мы разобрали, как с помощью трансформаций менять размер элементов, а также как их можно отражать.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

Комментариев нет