Функция transform: translate

Аналогично старым свойствам top и left, функция translate перемещает элемент на экране на новое место.

Листинг 3.23. Перемещение поля заголовка вправо #mainbox {

Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;

-moz-transform: translate(100px);

-webkit-transform: translate(100px);

}

Функция translate воспринимает экран как сетку пикселов, а точкой отсчета считает исходное положение элемента. Координаты верхнего левого угла элемента (0, 0), поэтому отрицательные значения параметра задают перемещение объекта левее или выше исходного местоположения, а положительные — правее или ниже.

В листинге 3.23 мы переместили поле заголовка на 100 пикселов вправо относительно исходного положения. Этой функции можно передавать два значения, чтобы передвинуть элемент как по горизонтали, так и по вертикали. Также можно воспользоваться функциями translateX и translateY для независимого перемещения в обоих измерениях.

Замените кодом из листинга 3.23 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.