Свойства transform и transition

Сразу после создания элементы HTML подобны неподъемным и прочно закрепленным блокам. Конечно, их можно перемещать с помощью кода JavaScript или возможностей из некоторых популярных библиотек, таких как jQuery, однако до появления свойств transform и transition в CSS3 стандартной процедуры для этого не существовало.

Свойство transform умеет выполнять четыре базовых трансформации:

• масштабировать (функция scale);

• вращать (функция rotate);

• наклонять (функция skew);

• перемещать или транслировать (функция translate).

Посмотрим, как это работает.

body {

text-align: center;

}

body {

text-align: center;

}

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

-webkit-transform: scale(2);

-moz-transform: scale(2);

}

#title {

font: bold 36px MyNewFont, verdana, sans-serif;

text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;

color: hsla(120, 100%, 50%, 0.5);

}

@font-face {

font-family: 'MyNewFont';

src: url('font.ttf');

}

Мы взяли базовые стили, которые ранее создали для поля заголовка, и трансформировали их, увеличив размер элемента в два раза. Функция scale() принимает два параметра:

• значение X для горизонтального масштабирования;

• значение Y – для вертикального.

Если указано только одно значение, оно используется для обоих параметров.

масштаб может быть описан как целым, так и дробным значением, а расчет масштабирования выполняется с помощью матрицы.Значения от 0 до 1 уменьшают размер элемента, значение 1 сохраняет исходные пропорции, а значения больше 1 пошагово увеличивают габариты объекта.

Интересного эффекта позволяют достичь отрицательные значения параметров функции.

body {

text-align: center;

}

body {

text-align: center;

}

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

-webkit-transform: scale(1,-1);

-moz-transform: scale(1,-1);

}

#title {

font: bold 36px MyNewFont, verdana, sans-serif;

text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;

color: hsla(120, 100%, 50%, 0.5);

}

@font-face {

font-family: 'MyNewFont';

src: url('font.ttf');

}

Здесь мы использовали два параметра для масштабирования элемента mainbox. Первое значение, равное 1, сохраняет исходные пропорции по горизонтали, а второе значение, равное -1, сохраняет исходные пропорции, инвертирует элемент по вертикали, создавая эффект зеркального отображения.

Существуют еще две функции, аналогичные scale(), но работающие только в одном измерении – либо по горизонтали, либо по вертикали. Эти функции, scaleX() и scaleY(), разумеется, принимают только один параметр.

Функция transform: rotate

Функция rotate поворачивает єлемент по часовой стрелке. Значение необходимо задавать в градусах и указівать единицу измерения deg.

#mainbox {

display: block;

width: 500px;

margin: 50px auto;

padding: 15px;

border: 1px solid #999999;

background: #FFFFFF;

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

}

Отрицательное значение угла поворота меняет направление вращения элемента.