CSS. Transform translate или перемещение элементов

Сегодня речь пойдет о свойстве css transform translate. Оно позволит вам перемещать элементы на нужное расстояние по горизонтали и вертикали.

Как работает перемещение?

Собственно, если вам нужно что-либо переместить по веб-странице, не нарушив при этом позиционирование и вообще ничего не поломав в верстке, наиболее эффективно будет использовать для этого свойство transform: translate (значение 1, значение 2). В скобочках записываются 2 значения. Первое определяет перемещение по горизонтали, а второе — по вертикали. Оба значения записываются в пикселях. Допускаются и отрицательные значения. В этом случае элемент будет перемещаться вверх и влево.

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!

Пример использования translate

Сейчас идет Евро-2016, я увековечу этот момент одним примером.

Гоооооооооол! И чтобы сделать мяч, который сам себя отсылает в девятку, нужно всего лишь создать анимацию для него. В html-код я вставил 2 изображения (ворот и мяча):

<img src = "goal.jpg">
<img class = "translate" src = "ball.png">

Вот такой код применяет к мячу нужную анимацию, которую мы опишем ниже:

.translate{
animation-name: translate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

А теперь прицельтесь как следует по воротам!

@keyframes translate{
from{transform: translate(0, 0)}
100%{transform: translate(-550px, -230px)}
}

Да, прямо в девяточку! Без шансов для вратаря. Впрочем, там же и нет вратаря rofl Гол забит, в и этом нам помогли css трансформации, а именно свойство transform: translate. Да, такая у меня сегодня короткая статья, но я надеюсь, этот пример вам понравился и из него вы поймете, как можно применить трансформацию. Ну а я пошел смотреть полуфинал Евро smile

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: