Подскажите проблему в анимации

Question

[Богдан Пасечник]

Попытался сделать слайдер как вот тут habrahabr.ru/post/149324 -> www.webmasters.by/images/articles/css/circle-hover-effects/index4.html
Вышло вот что brainstorm.com.ua/demo/trans. Но у человека у которого такая же версия goole chrome 26.0.1410.64 m при наведении на слайдер он отображается как бы зеркально. У меня все нормально работает. И я не могу понять в чем проблема.
Выяснилось что слайдер отображается зеркально и на примере. Предполагаю что решить проблему нельзя. Хотя она очень странная.

Answer 1

[danpetruk]

У меня тоже зеракалиться.

Дело в том что к .ch-info .ch-info-back у вас стоит -webkit-transform: rotate3d(0,1,0,180deg)
Это значит то, что картинка изначально поворачивается на 180 градусов. Поэтому просто поменяйте 180deg на 0deg и всё заработает (проверял)

Comments

[Богдан Пасечник]

Хм. Очень интересно.Когда я ставлю на .ch-info .ch-info-back -webkit-transform: rotate3d(0,1,0,0deg); у меня начинает работать слайдер не правильно. Он изначально перевернут. Выходит что верно для вас, для меня не подходит. Теперь нужно как то определить почему для нас подходят разные решения и для каждого как то использовать свой вариант. Большое спасибо Вам за проявленный интерес. Для меня это очень важно.

[Богдан Пасечник]

Залил пример с вашим изменением. brainstorm.com.ua/demo/trans2

[danpetruk]

У меня в linux -е изначально (с 180) неправильно. Зашёл в винду -заработало.
Вывод: поставьте js, который в случае linux -а будет менять 180 на 0

[danpetruk]

теперь работает и там и там. Поздравляю!

[Богдан Пасечник]

У меня на brainstorm.com.ua/demo/trans отображается так (1 без наведения. 2 с наведением)

А на brainstorm.com.ua/demo/trans2 так

сейчас узнаю какая ОС у клиента. Если дело и правда в линукс vs windows то сделаю как вы предложили.

[danpetruk]

У вас в trans2 -180deg

[Богдан Пасечник]

А нужно? Сейчас поставил на .ch-item:hover .ch-info {-webkit-transform: rotate3d(0,1,0,180deg);}
А на .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,0deg); }
У меня на винде работает brainstorm.com.ua/demo/trans и не работает нормально brainstorm.com.ua/demo/trans2. В прочем это не главно. Важно настроить что бы у вас это работало правильно.