Форум

xTODx · #1 (**permalink**) 09.10.2015, 20:42

Всем привет, вот, видел где-то как крутится кубик, и решил изобрести велосипед.
Главная цель - понять как это всё должно работать правильно.
Пока-что есть вот что
и то, на jsfiddle почему-то отказалось работать

Сейчас он просто переворачивается, но есть ряд проблем
1. Перевёрнутые грани, оно вроде так и должно быть, но не юзабильно если применять
2. После некоторых манипуляций, поворачивает не туда, куда хотелось-бы, оси что-ли поворачиваются тоже? О_О
3. отдаление при перевороте. но думаю это реально сделать, если добавить анимацию в каком-нить классе, и просто добавлять класс.
4. запрет следующего вращении, пока не закончено это, я пытался сделать

рони · #2 (**permalink**) 09.10.2015, 21:19

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

на jsfiddle почему-то отказалось работать

ставьте загрузку
No wrap - in <body>
потому что у вас onclick="rotY(-90)" а не $(...).click

xTODx · #3 (**permalink**) 09.10.2015, 21:20

Поправил
Вот а теперь. жду идей, советов)

рони · #4 (**permalink**) 09.10.2015, 21:22

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

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

рони · #5 (**permalink**) 09.10.2015, 21:31

xTODx,
смотря какой синтаксис вы используите
callback — функция, которая будет вызвана после завершения анимации
или
complete — функция, которая будет вызвана после завершения анимации
цифра 100 бесполезная величина в коде , но jQuery этим не испугать.

xTODx · #6 (**permalink**) 09.10.2015, 21:50

Да, я уже сам к этом упришёл, исправил.
НО оно всё-равно работает, в функцию его:

xTODx · #7 (**permalink**) 09.10.2015, 21:52

После одного поворота - не крутит

рони · #8 (**permalink**) 09.10.2015, 22:12

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

После одного поворота - не крутит

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

смотря какой синтаксис вы используите

смотреть
http://api.jquery.com/animate/#anima...erties-options

или

Цитата:

.animate( properties, options )

или

Цитата:

.animate( properties [, duration ] [, easing ] [, complete ] )

function rotX(angle){
		if(off){
			var $elem = $(".cube");
			off = false;
			$({deg: nowX}).animate({deg: nowX+angle}, {
			duration: 2000,
				step: function(now) {
					$elem.css({
						transform: 'rotateX(' + now + 'deg) '+'rotateY('+nowY+'deg) '+'rotateZ('+nowZ+'deg)'
					});
				},
*!*
            complete : function(){off=true;}
*/!*			
});
			nowX = nowX + angle;
		}
	}

xTODx · #9 (**permalink**) 09.10.2015, 22:23

Действительно работает

xTODx · #10 (**permalink**) 09.10.2015, 22:26

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

Форум

Справочник

Discord чат

Курсы javascript