Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Перемещения

.

Перемещения

Функция translation позволяет сдвигать элементы влево, вправо, вверх, вниз. Действие этих функций аналогично применению свойства position: relative;, где вы указываете координаты верхнего левого угла.

При применении функции translation перемещение элемента не влияет на структуру страницы в целом.

В отличие от position: relative, позволяющего позиционировать элемент либо относительно его нынешней позиции, либо относительно родительского элемента или другого предка, элемент, перемещаемый с помощью translated, может позиционироваться только относительно текущей позиции.

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

Перемещения

Если элемент нужно сместить только по одной оси, используйте функцию translatex или translatey:

Перемещения

Перемещения

Пусть в нашем баннере при наведении указателя мыши на слово «dukes» оно смещается вправо. В разметке мы напишем так:

<h1>Put your <span>dukes</span> up sire</h1>

Давайте применять стиль при наведении мыши на элемент h1, а не на span — так эффект будет нагляднее:

Перемещения

Этот код работает в большинстве браузеров, за исключением WebKit. Почему? Дело в том, что WebKit допускает операции трансформации только над блочными элементами. Это легко поправить:

Перемещения

Результат показан на рис. 8.2.

Неплохо, но можно улучшить! Давайте посмотрим, как сделать, чтобы текст еще и увеличивался в размерах.

Перемещения

Рис. 8.2. Результат трансформации при помощи функции translate


.

Читайте так же:
Not found