Как переместить элемент html вниз/вверх?
нужно расположить 9 картинок квадратом (как кубик рубика). Результат кода на картинке. Все перепробовал, но получается какой-то бред.
Дизайнерське меню .first < display : block; margin : 3 auto; margin-right: 54.5%; >.second < display : block; margin : 3 auto; >.third 
Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 3 апр 2020 в 10:05
Dima Piskariov Dima Piskariov
Как переместить объект в html
Решил я сделать HTML-страницу, на которой пользователь смог бы самостоятельно перемещать объекты. Стал я это реализовывать с помощью атрибутов ondragenter, ondragover, ondrop, draggable, ondragstart, ondragend. И все вроде бы хорошо, да вот незадача: объекты позиционируются друг за дружкой, а когда начинаешь двигать объект, то его сосед тут же становится на освободившееся место. Хочется, чтобы объекты на странице сами не прыгали и можно было бы перемещать объект на любое свободное место на странице.
Сразу скажу, что двигал я картинки и соответственно в тег прописал атрибуты draggable, ondragstart, ondragend. Мои объекты изначально были внутри блоков и перемещал я их на странице в область других блоков . Каждому из этих блоков я прописал в тег атрибуты ondragenter, ondragover, ondrop.
Блоки, где были объекты до перемещения, я сделал размером с объекты. Для каждого объекта — свой блок.
Свободную область, куда пользователь может переместить объекты, я разбил на множество маленьких блоков, меньше чем любой из объектов. Эти маленькие блоки я сделал размером 10×10 px. Можно и меньше, просто я посчитал, что для моей страницы вполне хватит точности позиционирования в 10 px. Пример разбиения области на блоки показан на рисунке 1.
Рисунок 1. Прямоугольная сетка квадратиков. На рисунке показано, какие значения z-index я присвоил каждому блоку.
Для того, чтобы можно было переместить объект второй раз, я присвоил каждому блоку свой z-index. Поскольку позиция объекта определяется в HTML по левому верхнему углу, то я нумеровал уровни z-index, начиная с нижнего правого блока. На рисунке 1 показано, какие значения z-index я присвоил каждому блоку. Объектам я присвоил еще большее значение z-index, чтобы объект был поверх любого блока.
Такая реализация позволила перекрывать объекты один другим. Поясню. Перемещаемый объект можно позиционировать на свободный для верхнего левого угла объекта блок. При этом перемещаемый объект может закрыть собой соседние объекты справа, например, как на рисунке 2.
Рисунок 2. Два рисунка. На первом — область до перемещения и выделен блок, куда поместят объект, который пока нарисован рядом. На втором рисунке область после перемещения.
Другая особенность перемещения объекта заключается в том, что пользователь не может сразу подвинуть объект чуть право, т.к. для верхнего левого угла объекта нужен свободный блок, а он закрыт самим объектом. Пример приведен на рисунке 3. Поэтому сначала пользователь придется сместить объект вниз, затем поставить на нужное место.
Рисунок 3. Три рисунка. На первом показано положение объекта и, куда пользователь хочет сместить объект. На втором рисунке — шаг 1: пользователю придется переместить объект вниз, на третьем рисунке — шаг 2: пользователь перемещает объект на нужное место.
Переместить объект, не влияя на вёрстку
Переместить объект, не влияя на вёрстку, можно через свойство transform: translate() .
.move-element < transform: translate(20px, 20px); >
Также через данный способ рекомендуется делать анимационные эффекты, когда надо передвинуть объект (например, вместо использования margin ).
Обновлено: 03 февраля 2021
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вывод нескольких элементов в ряд (Flexbox)
- Различия между float и flex
- Хлебные крошки (Breadcrumbs)
- Прижать футер к низу сайта
- Выровнять дочерние элементы по ширине
- Зафиксировать меню и сайдбар (position: sticky)
- Вертикальное выравнивание
- Порядок элементов (order)
- Разница между «px», «em» и «rem»
- 8 советов вёрстки и настройки email-рассылок
- Переместить объект, не влияя на вёрстку
- Пример использования «box-decoration-break»
Перемещения и трансформации в CSS3
Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!
Система координат
Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.
Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.
1: Горизонтальное перемещение
Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.
Двигаемся вправо
Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.
HTML
Откройте ваш любимый редактор кода и введите следующее:
- object: Установление главных правил нашего объекта.
- van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
- move-right: Используя этот класс, мы будем двигать наш объект.
.object < position: absolute; >.van
В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.
#axis:hover .move-right < transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ >Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.
.object < position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ >- linear: перемещение происходит постоянной скоростью от начала и до конца.
- ease: перемещение начинается медленно и затем набирает скорость.
- ease-in: перемещение начинается медленно.
- ease-out: перемещение заканчивается медленно.
- ease-in-out: перемещение начинается и заканчивается медленно.
- cubic-bezier: ручное определение значения перемещения.
Двигаемся влево
Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.
HTML
Создайте новый документ html и вставьте следующий код:
На этот раз мы используем класс move-left, чтобы переметить объект влево.
CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.
#axis:hover .move-left < transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ >Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО
2: Вертикальное перемещение
Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.
Двигаемся вверх
HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.
CSS
Так же как и грузовик, мы разместим ракету по центру:
.rocket
Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.
#axis:hover .move-up
Двигаемся вниз
Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);
HTML
CSS
#axis:hover .move-down
3: Диагональное перемещение
Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.
HTML
CSS
#axis:hover .move-ne
4: Вращение
Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.
Вращение по часовой стрелке
Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).
HTML
CSS
#axis:hover .rotate360cw
Вращение против часовой стрелки
Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).
HTML
CSS
#axis:hover .rotate360ccw
5: Масштабирование
Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.
HTML
CSS
#axis:hover .larger
6: Множественные движения
После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.
HTML
CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.
#axis:hover .multiple
Заключение
Итак, в этой статье мы рассмотрели основные примеры трансформации. Помните, что нужно обращать внимание на совместимость с различными браузерами. И не переусердствуйте с этими эффектами, ведь они могут не только не улучшить ваш дизайн, но и испортить его.