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

Сегодня речь пойдет о свойстве 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)}
}

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

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Добавить комментарий

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