CSS transform scale — Масштабирование предметов

CSS transform scale - Масштабирование предметовВслед за первой частью статьи, где мы разобрали процесс перемещения объектов с помощью transform translate.

В этой статье мы разберем процесс масштабирования с помощью transform scale.

Прежде всего, в этой статье мы рассмотрим, как работать с этим свойством. Посмотрим специфику его работы. И узнаем где и зачем его можно применить.

Часть 2. CSS transform scale: Масштабирование

С помощью transform scale мы можем увеличивать или правильнее сказать растягивать наш объект от его первоначального размера.

По сути, нам предоставили возможность изменять размер наших блоков, не затрагивая параметров width и height которые отвечают за ширину и высоту блока.

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

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

Синтаксис transform scale

1
transform: scale(цифра, цифра)

В скобках указаны координаты:

  • число – масштабирование по оси Х;
  • число – масштабирование по оси Y;

Как видите в скобках написано цифра, а не количество пикселей.

Каждая цифра это полная ширина или высота объекта:

  • 1 – размер не изменится;
  • 1.5 – размер увеличится в полтора раза по ширине или высоте;
  • 2 – размер увеличится в два раза по ширине или высоте;
  • 3- размер увеличится в три раза по ширине или высоте;

Для реализации примера возьмем наших старых друзей — синий квадрат и зеленый квадрат:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

CSS Transform – перемещение объектов

Пример: А теперь применим наше свойство transform scale для зеленого квадрата

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scale(1.5, 1)
}

Результат:

CSS transform scale - Масштабирование предметов

Пример: то же самое только transform scale работает по оси Y

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scale(1, 1.5)
}

Результат:

CSS transform scale - Масштабирование предметов

Посмотрите на оба результата, как видите при масштабирование, блок не сдвигает рядом стоящие блоки, а просто залазит на них.

Этого мы могли бы, дыбится, увеличив width и height и применив css position absolute. Посмотреть другие виды позиционирования

Но здесь есть очень важное отличие. Когда используется translate scale, сам блок не меняет размер, а только его отображение.

Браузеру будет надо только провести масштабирование одного блока и все.

А если мы бы применили width, height и position:absolute, браузеру надо будет заново перерисовать всю страницу целиком.

Синтаксис transform scale для каждой оси

1
transform: scaleX (цифра)

Данный параметр масштабирует объект только по оси X.

Пример:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scaleX(1.5)
}

Результат:

CSS transform scale - Масштабирование предметов

1
transform: scaleY (цифра)

Данный параметр масштабирует объект только по оси Y.

Пример:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-o-transform: scaleY(1.5)
}

Результат:

CSS transform scale - Масштабирование предметов

Поддержка CSS transform scale браузерами

Здесь ситуация обстоит так, все современные браузеры поддерживают данный элемент но через костыли.

Под костылем я понимаю префиксы для каждого браузера:

  • Firefox (-moz-transform);
  • Chrome (-webkit-transform);
  • Opera (-o-transform);
  • Internet Explorer 9 (-ms-transform);

Для transform scale, как и для transform translate существует transform3d, который умеет масштабировать элемент и по оси Z. Но его поддерживают только webkit браузеры (Chrome, Safari)

P.S.Я не ответил на вопрос где это все можно применять. Ответ я дам в третьей заключительной статье по css transform. Что бы не повторятся по несколько раз.

Интересное: Сапсан — безумная скорость

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев2 комментария

Когда всё это видишь, напрашивается лишь 1 вопрос: а не проще ли это в фотошопе сделать?

    Конечно, нет. Эта технология позволяет делать эффекты анимации. Не сама по себе, а в сочетании с другими фишками css3

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет