Как перемещать объекты в css

CSS: Transform (трансформация объектов)

На этом курсе вы изучите трансформацию в CSS. Вы узнаете больше о перемещении, вращении и деформации блоков. В итоге вы научитесь создавать креативные блоки, использовать эффект псевдотрехмерности, добавлять движение блоков. Трансформации пригодятся, если вы решите заниматься анимациями и созданием дизайнерских макетов. Знания из этого курса помогают программистам реализовывать сложные дизайнирские проекты, которые используют в рекламных целях. Этот курс подойдет фронтенд-программистам, которые хотят разобраться в красивых анимациях. Чтобы учиться было проще, стоит заранее изучить псевдоэлементы, позиционирование и базовые селекторы CSS.

Программа курса

Продолжительность 7 часов

Введение

Знакомимся с целями и задачами курса CSS: Трансформации

2D трансформации. Перемещение

Изучаем работу функции translate и учимся перемещать объекты на странице с ее помощью
упражнение

2D трансформации. Вращение

Учимся вращать объекты с помощью функции rotate
упражнение

2D трансформации. Масштабирование

Изучаем масштабирование HTML-элементов с использованием функции scale свойства transform
упражнение

2D трансформации. Наклон

Поговорим о возможности наклонения HTML-элементов с использованием функции skew свойства transform
упражнение

3D трансформации. Основы

Поговорим о трехмерном пространстве и чем оно отличается от двухмерного

3D трансформации. Функции

Учимся использовать изученные ранее изученные трансформации в трехмерном пространстве

Самостоятельная работа

Дополнительные задания, которые позволяют закрепить полученную теорию

Дополнительные материалы

Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

% завершений

Отзывы

Никита, огромное спасибо Вам за программу «Верстальщик».

Сегодня закончил последний урок. Все 16 курсов пройдены.

К огромному сожалению, финансово не потянул, чтобы заниматься с персональным наставником, поэтому времени на прохождение ушло больше и, возможно, недополучил какую-то дополнительную нужную информацию. Но результатом остался очень доволен.

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

Конечно же, практики катастрофически не хватает. Но дело сдвинулось с мертвой точки.))

Начал достаточно свободно ориентироваться в документации и перестал пытаться все запоминать, а вместо этого научился понимать логику действий. Ну а дальнейшая практика закрепит в сознании то, чего пока не запомнил, но знаю где подсмотреть в случае необходимости.

Я искренне признателен Вам за Ваш труд, благодаря которому, обучение по программе прошло очень быстро и увлекательно.

Сегодня пойду покорять последний бастион — третий заключительный учебный проект по Программе «Мессенджер «Hexlet Chat»».

К сожалению, на Хекслет нет специального места, где можно было бы размещать подобные топики, поэтому разместил здесь, в обсуждениях к последнему уроку курса.

3D трансформации. Функции — CSS: Transform (трансформация объектов)

В уроках посвящённых трансформации двухмерных объектов мы научились использовать несколько видов трансформации:

• Перемещение. За это отвечает функция translate()
• Вращение. Для этого использовалась функция rotate()
• Масштабирование с использованием функции scale()

Трансформации трехмерных объектов не отличаются по своему функционалу. Мы так же можем использовать только эти типы, но для них существует специальный синтаксис. Чтобы браузеру было легче, при трансформации трехмерных объектов к названию функции дописывается 3d . Таким образом мы получаем 3 функции для трехмерных элементов:

• translate3d() — перемещение
• rotate3d() — вращение
• scale3d() — масштабирование

Единственная трансформация, которая отсутствует для оси z — skew()

transform-style

Для корректной демонстрации всех этих трансформаций необходимо иметь настоящий трехмерный объект, а не только ось z. В качестве каноничного примера используют куб. Для его создания понадобится воспользоваться новым свойством, а именно transform-style , которое принимает одно из двух значений:

• flat . Значение по умолчанию. Оно говорит о том, что элемент находится в той же плоскости, что и его родитель. Именно так мы видим элементы в большинстве случаев и в предыдущих уроках в частности
• preserve-3d — элемент как бы находится в своём трехмерном пространстве, а не в пространстве своего родителя. Это означает, что элементы будут независимы друг друга. Например, они могут проходить сквозь друг друга

Вначале это может немного запутать, но проще всего взглянуть на оба значения в контексте примера:

В левом примере зелёный блок находится выше красного, это объясняется тем, что элементы находятся в одном двухмерном пространстве и зависят друг от друга. Как бы вы не трансформировали зелёный блок он никак не сможет взаимодействовать с красным блоком, так как находится перед ним.

В правом примере значение preserve-3d для красного блока создает собственный контекст объёмного пространства. Все дочерние элементы не просто существуют рядом друг с другом, а находятся в едином трехмерном пространстве, что позволяет элементам проходить друг через друга и перемещаться относительно общих осей.

Проще всего думать об этом так, что flat создает единое двухмерное пространство, а preserve-3d трехмерное. Это добавляет новые возможности по расположению элементов друг с другом.

Важно: свойство transform-style устанавливается единожды для родительского элемента. Так как свойство отвечает за создание пространства, то нет смысла в установке свойства дочерним элементам. В примере выше таким блоком стал красный элемент. Так же важно помнить, что речь идёт о прямых потомках. Если добавить новый элемент внутрь зелёного блока, то для него пространство будет определяться значением flat

Теперь настало время узнать, как работают уже знакомые трансформации, но в трехмерном пространстве. В качестве примера возьмём самый примитивный трехмерный объект — куб. Все его грани сделаны полупрозрачными, чтобы легче было ориентироваться как он выглядит в пространстве. Сейчас же мы смотрим ровно в его центральную точку передней грани. Это будет начальной позицией при любой трансформации, которую мы сделаем ниже. Вы же можете менять начальную точку используя свойство perspective-origin — это будет давать чуть другой эффект, так как взгляд будет немного под другим углом, в прямом смысле этого слова.

Перемещение

Для перемещения трехмерных объектов используются функции:

• translateX()
• translateY()
• translateZ()

и их «старший брат» — translate3d(x, y, z) . Оно просто объединяет все три функции для удобства написания. Следующие две записи равнозначны:

.block  transform: translateX(10px) translateY(10px) translateZ(10px); transform: translate3d(10px, 10px, 10px); > 

Перемещение по координатам x и y достаточно очевидны. А как происходит перемещение по оси z? Браузер, при изменении положения по оси z перемещает элемент ближе или дальше от начального месторасположения. При этом, если элемент перемещается дальше, то он уменьшается, а если перемещается ближе, то увеличивается. Такой эффект можно рассмотреть на самом кубе. Передняя и задняя стенка куба располагаются с использованием функции translateZ() . В примере ниже были убраны все грани кроме фронтальной и задней, а также куб был немного развернут.

Грани имеют следующие свойства:

.front  transform: translateZ(150px); > .back  transform: translateZ(-150px); > 

Для достижения эффекта куба фронтальная грань была перемещена по оси z на 150 пикселей ближе к пользователю. Это привело к побочному эффекту: грань теперь имеет размер не 300×300 пикселей, как указано, а 382×382 пикселя. Как можно понять, такие трансформации преобразуют именно размеры элементов, что важно учитывать при встраивании трансформированных объектов в уже готовые шаблоны страниц.

Задняя грань претерпела похожие трансформации: она была отдалена на 150 пикселей назад относительно своего начального месторасположения. Это изменило и изначальный размер самого квадрата. Теперь он имеет размер 250×250 пикселей.

Важно: обратите внимание, что трансформация по одной оси и на одинаковое количество пикселей не привело к тому, что элементы увеличились и уменьшились на одинаковое количество пикселей. Здесь прямая связь от свойства, изначальных размеров, положительности или отрицательности значения, а также значения перспективы. Более полно, со всеми формулами и матрицами описание приведено в официальной спецификации.

Если вы не собираетесь делать свои мультфильмы на CSS, то полностью разбираться в этом не нужно. Главное уловить суть того, как свойства влияют на элементы.

Вращение

Функции, предоставляемые спецификацией CSS повторяют аналогичные функции для перемещения. Вращение элемента осуществляется с помощью следующих функций:

• rotateX() — вращение по оси x
• rotateY() — вращение по оси y
• rotateZ() — вращение по оси z
• rotate3d(x, y, z) — вращение по осям x, y и z

Проще всего увидеть вращение элементов на примере анимации куба. Для каждой оси вынесен отдельный пример

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

Масштабирование

Нет ничего удивительного, что для масштабирования элемента в трехмерном пространстве используются такие же по замыслу функции, как и в прошлых примерах:

• scaleX() — масштабирование по оси x
• scaleY() — масштабирование по оси y
• scaleZ() — масштабирование по оси z
• scale3d(x, y, z) — масштабирование по осям x, y и z

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

Всё о веб-анимациях в 2022

Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.

Даже совершенно обычный сайт можно оживить анимацией:

Анимации делают работу с сайтом удобной и приятной. Например, когда пользователь совершает действие, ему можно показать какие-то изменения на странице, как здесь:

Автор — Аарон Икер, источник: dribbble.com

Анимированные страницы сглаживают переход между разными состояниями элементов интерфейса и создают эффект непрерывности происходящего. А необычный предварительный загрузчик увлекает посетителя на время загрузки страницы и снижает показатель отказов.

Способы создания анимаций

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций:

• CSS-анимации,
• SVG-анимации,
• JavaScript-анимации.

CSS-анимации

Это самый простой способ анимировать объекты на странице. Он позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия.

CSS-анимации создают с помощью группы свойств animation . Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики:

• animation-name — имя анимации, можно задавать несколько имён через запятую;
• animation-direction — направление анимации;
• animation-fill-mode — состояние элемента до и после анимации;
• animation-play-state — управление состоянием: запуск или приостановка анимации;
• animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
• animation-delay — задержка начала выполнения анимации;
• animation-iteration-count — количество повторов анимации;
• animation-duration — длительность.

С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.

Автор — Дилан Бауманн, посмотреть на CodePen.

CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:

Создавать CSS-анимации можно и с помощью свойства transition. Но оно работает только при загрузке страницы, добавлении классов или изменении состояния, к примеру, hover .

Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.

CSS-анимации можно запускать при загрузке страницы или при определённом действии, но для этого иногда нужен JavaScript. Например, чтобы при открытии меню на мобильном кнопка бургера превращалась в крестик, нужно добавить ей соответствующий класс с помощью JS и для этого класса прописать изменения CSS-свойств.

Автор — Бенджамин Симье, посмотреть на CodePen.

С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:

Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.

SVG-анимации

Внутри SVG есть отдельный способ анимаций — SMIL. Это спецификация для анимаций, действующая только внутри векторной графики. В ней определяется набор новых тегов и их атрибутов, которые обеспечивают работу с частями SVG.

SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:

Автор: Никки Пантони, посмотреть на CodePen.

Или когда нужно заставить элемент двигаться по заданному пути:

Автор: Фабио, посмотреть на CodePen.

А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:

Автор: CRL, посмотреть на CodePen.

JavaScript-анимации

Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.

Автор — Джереми Кэрис, посмотреть на CodePen.

Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.

Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».

Как оптимизировать анимации на сайте?

Чем больше анимаций на сайте, тем больше информации приходится обрабатывать браузеру. И чем сложнее анимации, тем медленнее отрисовывается страница. Поэтому важно выбирать правильные способы анимирования и не усложнять их. Например, если нужно просто вращать элемент вокруг своей оси, то лучше использовать animate и transform , а не подключать JS-библиотеку.

Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .

Таких тонкостей у анимаций много. Нужно их обязательно соблюдать, чтобы не превратить сайт в медленно работающего «монстра», от которого «убегают» пользователи.

Как создать простую анимацию?

Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет спецификация, переведённая на русский язык.

Попробуем вместе сделать простую анимацию — прыгающий мячик.

Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.

Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.

.ball < font-size: .9px; width: 60em; height: 60em; border-radius: 50%; position: relative; >.ball-bg < width: 100%; height: 100%; background: url(http://guthriesports.files.wordpress.com/2010/03/soccer_ball_6.jpg) no-repeat center; >

Создаём первую анимацию с помощью директивы @keyframes @keyframes (rotating-ball) @keyframes . Называем её rotating-ball , так как она отвечает за вращение мяча. Внутри анимации добавляем две точки: от какого (0%) и до какого (100%) состояния должен вращаться мяч. Это будет 0 и 180 градусов соответственно. Градусы в CSS прописываем с помощью deg — 180deg .

Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.

• имя анимации, которое указали в @keyframes @keyframes (rotating-ball) ;
• длительность анимации — animation-duration — за сколько она проходит от точки 0% до 100%.
• количество повторений — animation-iteration-count, сделаем анимацию бесконечной — infinite;
• как будет развиваться анимация между ключевыми кадрами — animation-timing-function , сделаем равным linear .

@keyframes rotating-ball < 0% 100% > .ball

Теперь усложним анимацию: сделаем так, чтобы мяч прыгал. Для этого используем свойство transform и его значения:

• translate — для перемещения горизонтально и вертикально;
• scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
• rotate — придать дополнительное вращение при ударах.

У этой анимации будет больше ключевых кадров, потому что мы постараемся максимально подробно описать поведение мяча. Начнём с первого и последнего кадра. Потом добавим кадры, когда мяч должен ударяться об пол. Можно помочь себе и нарисовать с помощью CSS линию, чтобы видеть, обо что ударился мяч. При ударе об пол используем scale , чтобы сжать мяч. Так как на следующих шагах scale не будет, мяч вернётся к исходным размерам.

@keyframes bouncing-ball < 0% 12% 15% 18% 21% 45% 48% 51% 69% 72% 75% 90% 100% >

Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.

.ball

Добавим промежуточные пункты, чтобы анимация смотрелась более правдоподобно. Получаем результат:

Итоги

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

Однако анимации могут и отталкивать посетителей, если они замедляют загрузку страниц. Поэтому важно оптимизировать их и выбирать правильные способы анимации. Это пригодится почти любому фронтендеру, а научиться этому (и всему, что связано с анимациями) можно на курсе по анимациям от HTML Academy.

Автор: Елизавета Пак, старший HTML-верстальщик в Brain Rocket

Как перемещать объекты в css

Порядок Показа Элементов

Вы можете управлять порядком отображения накладывающихся друг на друга элементов проекта ARCHICAD. По умолчанию используется порядок показа, обычно применяемый в архитектурных чертежах.

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

Классификация элементов выглядит следующим образом:

1. Аннотации (Тексты, Выносные Надписи, Размеры всех типов, Паспорта Зон).

2. 2D-элементы (Линии, Дуги и Окружности, Сплайны, Узловые Точки).

3. Библиотечные Элементы (Объекты, Источники Света, Лестницы).

5. 3D-конструкции (Стены, Балки, Перекрытия, Окна, Двери, Колонны, Крыши, 3D-сетки).

Порядок Показа Накладывающихся Элементов

Порядок отображения накладывающихся элементов одного класса определяется порядком их создания в проекте. Стены с одинаковой штриховкой всегда сопрягаются.

При необходимости выбора накладывающихся элементов одного класса их можно последовательно перебирать с помощью сочетания клавиш Shift+Tab.

Специальный Порядок Показа Элементов

Стандартный порядок показа накладывающихся элементов не всегда оказывается приемлем, поэтому существуют возможности изменения порядка отображения элементов. Например, чтобы «переместить наверх» Штриховку, перекрываемую 2D-элементом или Объектом, можно воспользоваться командами Редактор > Порядок Показа или соответствующими кнопками, расположенными в табло команд Упорядочения Элементов .

Для вновь размещаемых элементов эти команды действуют следующим образом.

• Переместить Вперед: Выбранные элементы располагаются над всеми элементами своего класса и классов более низкого уровня. Однако, они остаются под элементами классов более высокого уровня.

• Переместить на Передний План: Выбранные элементы располагаются над всеми остальными элементами всех классов.

• Переместить Назад: Выбранные элементы располагаются под всеми элементами своего класса и классов более высокого уровня. Однако они остаются над элементами классов более низкого уровня.

• Переместить на Задний План: Выбранные элементы располагаются под всеми остальными элементами всех классов.

• Восстановить Стандартное Упорядочение: Эта команда восстанавливает используемый по умолчанию порядок отображения элементов, описанный выше.

Механизм Управления Показом Элементов

Как стандартное упорядочение, так и специальное, настроенное при помощи описанных выше команд, базируются на двух механизмах управления показом, называемых классами и уровнями.

ARCHICAD размещает элементы на 14 уровнях. Каждый уровень может содержать элементы любых типов. Конечное упорядочение, отображаемое на экране и при печати, основывается на уровнях и классах элементов. Все элементы любого уровня располагаются над элементами более низких уровней независимо от их класса.

Вновь создаваемые элементы всегда размещаются на уровне своего класса. Классы элементов распределяются по уровням следующим образом:

1-4: по умолчанию не используются

7: Библиотечные Элементы

11-14: по умолчанию не используются

По умолчанию четыре верхних и четыре нижних уровня не используются. Активация описанных выше команд меню Редактор > Порядок Показа перемещает выбранные элементы вверх или вниз в иерархии уровней.

Команды Переместить на Передний План и Переместить на Задний План перемещают выбранные элементы по уровням вверх или вниз до тех пор, пока они не окажутся над или под всеми элементами, расположенными на всех уровнях. Это не обязательно должен быть 1-й или 14-й уровень, поэтому в большинстве случаев остается возможность располагать над самыми верхними или под самыми нижними элементами новые.

Тексты или Размеры, находящиеся на самом верхнем уровне, нельзя закрыть другими элементами, перемещаемыми на более высокие уровни. Поэтому, если вы хотите, например, чтобы Штриховка закрыла собой Текст, необходимо, переместить данный Текст на один уровень вниз.

При перемещении вперед или назад нескольких элементов, расположенных на различных уровнях, каждый элемент перемещается на соседний уровень.

Элементы разных типов, перемещаемые на передний или на задний план, окажутся над или под всеми остальными элементами, но сохранят свое расположение в иерархии относительно друг друга.

Зоны и Штриховки являются составными элементами, так как содержат элементы различных классов (Зоны состоят из Многоугольников и Паспортов Зон, а Штриховки могут содержать тексты их площадей). Эти компоненты составных объектов имеют свое собственное упорядочение согласно классу, которому они принадлежат. Например, текст площади Штриховки всегда располагается над многоугольником Штриховки. Вы можете самостоятельно менять упорядочение компонентов составных объектов, однако многоугольник Штриховки никогда не может оказаться над текстом ее площади, а Многоугольник Зоны — над Паспортом Зоны, т.е. перемещение Текста в иерархии уровней всегда приводит к перемещению многоугольника и наоборот.

При выводе в файлы формата DXF/DWG, все элементы будут прозрачными. Это означает, что будут отображаться все накладывающиеся друг на друга элементы.