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

Скрип_двери · 26.01.2016, 17:50

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

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

http://rghost.net/8ZwsRHPlQ

Naive · 26.01.2016, 19:16

Сюда выложи кусок кода, отвечающего за сдвиг, это врятли больше 10 строк.
На вскидку:
0. :active — это даст описанный эффект, если решение чисто на css
1. :focus — пока не сместится фокус после нажатия эффект будет сохраняться
2. :checked ~ label если спрятать лейбл при чекеде, то обратно не вернуть, лейбл стригеррит чекед у чекбокса или радио-баттона. Фаерфокс (как по идее и должны браузеры) запомнит состояние.
3. animation-play-state

Трансформ тут ваще не особо то при делах

Скрип_двери · 26.01.2016, 20:39

Цитата:

Сообщение от Naive

Сюда выложи кусок кода, отвечающего за сдвиг, это врятли больше 10 строк.
На вскидку:
0. :active — это даст описанный эффект, если решение чисто на css
1. :focus — пока не сместится фокус после нажатия эффект будет сохраняться
2. :checked ~ label если спрятать лейбл при чекеде, то обратно не вернуть, лейбл стригеррит чекед у чекбокса или радио-баттона. Фаерфокс (как по идее и должны браузеры) запомнит состояние.
3. animation-play-state

Трансформ тут ваще не особо то при делах

Код 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>

Naive · 26.01.2016, 22:29

ну вариант 0, действуй с другими и будет счастье

Скрип_двери · 27.01.2016, 02:32

Цитата:

Сообщение от Naive

ну вариант 0, действуй с другими и будет счастье

Можете тыкнуть носом? Уже кучу вариантов испробовал

SQLPowerUser · 27.01.2016, 15:42

При щелчке по рисунку, он уезжает вправо. Щелкаем в любое место экрана, он возвращается назад.

Код 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>

26.01.2016, 17:50	#1
Скрип_двери Регистрация: 26.01.2016 Сообщений: 4	Css3 transform сдвиг элемента Что нужно: чтобы пр нажатии, авто отъезжал и оставался в месте, на которое он отъехал Что получилось: только если нажать и держать кнопку, то отъезжает, и когда отпускаешь кнопку мыши -- возвращается обратно. Буду очень признателен за вашу креативность и отзывчивость. http://rghost.net/8ZwsRHPlQ

26.01.2016, 19:16	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Сюда выложи кусок кода, отвечающего за сдвиг, это врятли больше 10 строк. На вскидку: 0. :active — это даст описанный эффект, если решение чисто на css 1. :focus — пока не сместится фокус после нажатия эффект будет сохраняться 2. :checked ~ label если спрятать лейбл при чекеде, то обратно не вернуть, лейбл стригеррит чекед у чекбокса или радио-баттона. Фаерфокс (как по идее и должны браузеры) запомнит состояние. 3. animation-play-state Трансформ тут ваще не особо то при делах Alar, верни репу!

26.01.2016, 22:29	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	ну вариант 0, действуй с другими и будет счастье Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
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