Возможно ли так сделать при помощи svg?

[sweelemk]

Задание такое: есть логотип, он должен разворачиваться в 3 этапа при наведении. При следующем наведении на логотип, он повторяет действия. Возможно ли такое реализовать при помощи SVG? Может нужно с библиотекой порабоатать? Подскажите идею. Спасибо См. изображение.

[sweelemk]

[skrudjmakdak]

т.е. один блок должен выезжать и за другого?

[sweelemk]

skrudjmakdak, должен разворачиваться. Когда лист бумаги сложить в 4 части, в потом разворачивать. Так и здесь должно быть

[skrudjmakdak]

типо такого?
http://akatev.ru/files/public/php/slide/

сами развороты?

[sweelemk]

skrudjmakdak,
да, только разворачиваться должен по часовой стрелке.

[sweelemk]

и из 4-х маленьких получается 1 большой

[skrudjmakdak]

тогда за основу можете взять мой алгоритм, только смотрите, это все дело идет на css3. т.е. в старых браузерах это работать не будет. еще один момент, я не знаю как отслеживать событие когда имага завершит свою трансформацию, для того чтобы другая начала свою трансформацию

еще видел подобную фигню на канвасе кто то писал, но опять же все на новых браузерах. вот только урлу я не помню((

[sweelemk]

Мне достаточно новых браузеров. Спасибо!

[skrudjmakdak]

вот нашел ссылки:
http://www.html5canvastutorials.com/...form-tutorial/
http://www.w3schools.com/tags/tryit....nvas_transform
http://www.w3schools.com/tags/canvas_transform.asp
http://www.html5canvastutorials.com/...tate-tutorial/

имхо, на канвасе будет лучше. там принцип везде один это метод transform