|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
26.01.2016, 17:50 | #1 |
Регистрация: 26.01.2016
Сообщений: 4
|
Css3 transform сдвиг элемента
Что нужно: чтобы пр нажатии, авто отъезжал и оставался в месте, на которое он отъехал
Что получилось: только если нажать и держать кнопку, то отъезжает, и когда отпускаешь кнопку мыши -- возвращается обратно. Буду очень признателен за вашу креативность и отзывчивость. http://rghost.net/8ZwsRHPlQ |
26.01.2016, 19:16 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Сюда выложи кусок кода, отвечающего за сдвиг, это врятли больше 10 строк.
На вскидку: 0. :active — это даст описанный эффект, если решение чисто на css 1. :focus — пока не сместится фокус после нажатия эффект будет сохраняться 2. :checked ~ label если спрятать лейбл при чекеде, то обратно не вернуть, лейбл стригеррит чекед у чекбокса или радио-баттона. Фаерфокс (как по идее и должны браузеры) запомнит состояние. 3. animation-play-state Трансформ тут ваще не особо то при делах
Alar, верни репу!
|
26.01.2016, 20:39 | #3 | |
Регистрация: 26.01.2016
Сообщений: 4
|
Цитата:
Код HTML:
<!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> Последний раз редактировалось Вадим Мошев; 26.01.2016 в 21:03. |
|
26.01.2016, 22:29 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
ну вариант 0, действуй с другими и будет счастье
Alar, верни репу!
|
27.01.2016, 02:32 | #5 |
Регистрация: 26.01.2016
Сообщений: 4
|
|
27.01.2016, 15:42 | #6 |
Форумчанин
Регистрация: 19.01.2015
Сообщений: 158
|
Если я правильно понял задачу...
При щелчке по рисунку, он уезжает вправо. Щелкаем в любое место экрана, он возвращается назад.
Код HTML:
<!DOCTYPE html> <html> <head> <title>test</title> <style> #axis { position:relative; top:30px; } #axis .move-right { position:absolute; outline:none; } #axis .move-right:focus {right:0;} </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="" tabindex="-1" /> </div> </body> </html> |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
SVG и transform-style(preserve-3d) | AlexandrNB | HTML и CSS | 1 | 26.01.2015 14:13 |
transform:scale замыливает шрифт | alex4321 | HTML и CSS | 4 | 05.11.2012 22:45 |
transform угол | Predator199 | HTML и CSS | 5 | 08.09.2012 13:34 |
как изменить css свойство transform из Js? | Даниил_глазко | JavaScript, Ajax | 2 | 15.10.2011 13:23 |
Сдвиг элемента относилельно других | L_M | HTML и CSS | 7 | 15.08.2009 01:52 |