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

17-06-2011

Размещено в рубрике: CSS

Вслед за первой частью статьи, где мы разобрали процесс перемещения объектов с помощью 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. Что бы не повторятся по несколько раз.

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

blah

Нравится

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

Присоединится ко мне в twitter

Присоединится ко мне в Вконктакте

Присоединится ко мне в Facebook

Присоединится ко мне в Google plus

Мои групы:

Группа webmasterprof.ru в Facebook

Группа webmasterprof.ru в Вконтакте

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