Применение CSS-трансформации масштабирования (scale)

CSS свойство transform: scale()

CSS свойство transform: scale() позволяет масштабировать элементы веб-страницы. Это мощный инструмент для изменения размера объектов без необходимости изменять их фактический размер в HTML-коде.

Преобразование масштабирования с помощью свойства transform: scale() осуществляется вокруг точки захвата, который по умолчанию является центральной точкой элемента. Величина масштабирования указывается в виде параметра функции scale(). Например, чтобы уменьшить размер элемента в два раза, можно использовать значение scale(0.5), а для увеличения в два раза — scale(2).

Примеры кода:

1. Применение масштабирования элемента при наведении мыши:

<div class="box"></div>

```css .box { width: 100px; height: 100px; background-color: red; transition: transform 0.3s; } .box:hover { transform: scale(1.5); } ```

В данном примере при наведении мыши на элемент с классом "box" происходит плавное увеличение его размера в 1.5 раза.

2. Применение анимации масштабирования с помощью ключевых кадров:

<div class="box"></div>

```css .box { width: 100px; height: 100px; background-color: blue; animation: scaleAnimation 2s infinite alternate; } @keyframes scaleAnimation { 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } } ```

В данном примере элемент с классом "box" будет мигать сначала увеличением в два раза, а затем возвращением к исходному размеру каждые 2 секунды.

3. Масштабирование элементов по отдельным осям:

<div class="box"></div>

```css .box { width: 200px; height: 100px; background-color: green; transform: scaleX(2) scaleY(0.5); } ```

В данном примере элемент с классом "box" будет иметь удвоенную ширину и уменьшенную в два раза высоту.

CSS свойство transform: scale() является мощным инструментом для создания интерактивных и анимированных эффектов на веб-странице. Благодаря ему можно легко изменять размер объектов, придавая им динамичность и привлекательность.

Применение CSS-трансформации масштабирования (scale)

CSS свойство transform: scale()

Примеры кода:

Похожие вопросы на: "css transform scale "