Css3 transform сдвиг элемента

@Отчаянный_ · Регистрация: 21.11.2015

Студворк — интернет-сервис помощи студентам

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

Буду очень признателен за вашу креативность и отзывчивость.

http://rghost.net/8ZwsRHPlQ

@Karssen · 26.01.2016, 17:53

Залейте код сюда, здесь есть все необходимые инструменты. Если вы используете анимацию то скорее всего достаточно задать в том же классе, где вы задаете анимацию свойство animation-fill-mode: forwards

@Отчаянный_ · 26.01.2016, 19:00 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<<!DOCTYPE html>
<html>
<head>
    <title>wqed</title>
    <style type="text/css">
#axis:active .move-right {
    transform: translate(850px,0);
}
.object {
    position: absolute;
    transition: all 0.05s ease-in-out;
}
 
 
    </style>
</head>
<body>
 
 
<div id="axis" class="one">
 
        <img class="object move-right" src="http://5.firepic.org/5/images/2016-01/26/10aosbdpovck.png" alt="" />
 
</div>
</body>
</html>

Добавлено через 22 минуты
Karssen, >Если вы используете анимацию то скорее всего достаточно задать в том же классе, где вы задаете анимацию свойство animation-fill-mode: forwards

не сработало

@Karssen · 27.01.2016, 16:13

Отчаянный_, это не анимация, сейчас попробую сделать как надо

@siyanie · 27.01.2016, 16:21

2 строчки кода

HTML5
1
2
3
<div>
  <img src="http://s1.iconbird.com/ico/0512/iconspackbyCem/w256h2561337871780256.png" alt="" />
</div>

CSS
1
2
3
4
5
6
img:active {
  transform: translate(500px, 0);
}
img {
  transition: transform 2s ease;
}

@Karssen · 27.01.2016, 16:30

Можно так реализовать https://jsfiddle.net/mh2p09n1/

HTML5
1
2
3
4
5
<div id="axis" class="one">
 
        <img data-role="bus" src="http://5.firepic.org/5/images/2016-01/26/10aosbdpovck.png" alt="" />
 
</div>

CSS
1
2
3
4
5
6
7
8
9
.object {
    animation-name: drive;
    animation-duration: 3s;
    animation-fill-mode:forwards;
}
@keyframes drive {
    from{transform:translateX(0)}
    to{transform:translateX(400px)}
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict'
let container = document.getElementById('axis');
let bus = container.querySelector('img');
 
container.addEventListener('click', onItemClick);
 
function onItemClick(event){
    let target = event.target;
  let bus = target.closest('[data-role=bus]');
  
  
 if(!bus) return;
 
 if(!bus.classList.contains('object')){
    bus.classList.add('object');
 } else{
    bus.classList.remove('object');
 }
  
}

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@Отчаянный_ 0 / 0 / 0 Регистрация: 21.11.2015 Сообщений: 4

	Css3 transform сдвиг элемента 26.01.2016, 17:47. Показов 1139. Ответов 5 Метки нет (Все метки) Что нужно: чтобы пр нажатии, авто отъезжал и оставался в месте, на которое он отъехал Что получилось: только если нажать и держать кнопку, то отъезжает, и когда отпускаешь кнопку мыши -- возвращается обратно. Буду очень признателен за вашу креативность и отзывчивость. http://rghost.net/8ZwsRHPlQ 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	26.01.2016, 17:53
	Залейте код сюда, здесь есть все необходимые инструменты. Если вы используете анимацию то скорее всего достаточно задать в том же классе, где вы задаете анимацию свойство animation-fill-mode: forwards 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	27.01.2016, 16:13
	Отчаянный_, это не анимация, сейчас попробую сделать как надо 0