Сегодня речь пойдет о свойстве css transform translate. Оно позволит вам перемещать элементы на нужное расстояние по горизонтали и вертикали.
Как работает перемещение?
Собственно, если вам нужно что-либо переместить по веб-странице, не нарушив при этом позиционирование и вообще ничего не поломав в верстке, наиболее эффективно будет использовать для этого свойство transform: translate (значение 1, значение 2). В скобочках записываются 2 значения. Первое определяет перемещение по горизонтали, а второе — по вертикали. Оба значения записываются в пикселях. Допускаются и отрицательные значения. В этом случае элемент будет перемещаться вверх и влево.
Пример использования 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)}
}
Да, прямо в девяточку! Без шансов для вратаря. Впрочем, там же и нет вратаря Гол забит, в и этом нам помогли css трансформации, а именно свойство transform: translate. Да, такая у меня сегодня короткая статья, но я надеюсь, этот пример вам понравился и из него вы поймете, как можно применить трансформацию. Ну а я пошел смотреть полуфинал Евро