jQuery.transit
Вложений: 1
Здравствуйте!
Сегодня открыл для себя transition, начал делать анимацию 3d поворота, картинка за картинкой, на 180 градусов. Если делать так $("#button").click(function() { $("#container").transition({perspective: '600px', rotateY: '180deg'}, 500); $("#container2").transition({perspective: '600px', rotateY: '180deg'}, 500); setTimeout(function(){$("#container2").css("z-index", "2");}, 150); });то блоки движутся синхронно, но задняя картинка инвертируется(как и ожидалось), чтобы это исправить написал так window.onload = function() {$("#container2").transition({perspective: '600px', rotateY: '180deg'}, 0);} $("#button").click(function() { $("#container").transition({perspective: '600px', rotateY: '180deg'}, 500); $("#container2").transition({perspective: '600px', rotateY: '360deg'}, 500); setTimeout(function(){$("#container2").css("z-index", "2");}, 150); });но теперь появилась рассинхронизация в движении =( как это можно исправить? прикрепил архив(html файл + jquery 1.8.3 + jquery.transit) |
решил проблему, нужно было дописать
-webkit-perspective: 600px;в CSS родительского элемента, и поставить perspective: '0px' в window.onload = function() {$("#container2").transition({perspective: '600px', rotateY: '180deg'}, 0);} $("#button").click(function() { $("#container").transition({perspective: '0px', rotateY: '180deg'}, 500); $("#container2").transition({perspective: '0px', rotateY: '360deg'}, 500); setTimeout(function(){$("#container2").css("z-index", "3");}, 150); });видимо косяк плагина) |
Часовой пояс GMT +3, время: 19:32. |