Спасибо за советы ... все было именно так как и подозревалось, просто механизму DOM не хватало времени на рендеринг элемента и посему просто очень нужна задержка для transform ... вроде ранее не замечал такого, пользуюсь трансформациями часто ...
Решение тот же таймер на запуск процедуры тансформации ...
var to = setTimeout(function(){slideImage (curAnnimation, elementToSlide)}, 500);
...
$(obj).find("div.article_image:first").css({position: "absolute"}).addClass("spin90").removeClass("spin0");
$(obj).find("div.article_image:last").css({position: "absolute"}).addClass("spin0").removeClass("spin-90");
Переделывать в изменение CSS на лету не стал ... была еще одна бесплодная попытка подцепить классы, но уже другим способом ...
CSS
:root div.article-string hgroup.article a div.image_sute div.article_image
{
width: 100%; height: 130px; overflow: hidden; position: relative; top: 0; left: 0; transform-style: preserve-3d; transform-origin: bottom; transition: all 1s cubic-bezier(0, 0, 0, .5);
}
:root div.article-string hgroup.article a div.image_sute div.article_image.spin-90
{
transform: rotateX(-90deg) perspective(800px);
}
:root div.article-string hgroup.article a div.image_sute div.article_image.spin90
{
transform: rotateX(90deg) perspective(800px);
}
:root div.article-string hgroup.article a div.image_sute div.article_image.spin0
{
transform: rotateX(0) perspective(800px);
}
Ну и проверил верстку в браузерах, вроде все как исходно, смотрится везде ...
Демку подправил, повесит там до NY
