Hover-эффекты для круглых элементов с использованием CSS Transitions

[@ShpuntiK]

В опере половина только работает…

[@Magir]

Пример 6 в последней Опере не работает. И еще очень неприятно, что hover срабатывает по границе прямоугольника, в который вписаны окружности.

[@spmbt]

В 11.64 Опере тоже не срабатывает только 6-й пример, остальные работают. И все срабатывают по границе прямоугольника.

[@yoyurec]

оперативно перевели!

[@Haoose]

Симпатично.
Firefox 14.0.1 / Win 7
6 пример
Сначала выглядит так:

После наведения мыши уже нормально отображается.

[@Doktor_Gradus]

Кстати, тоже очень клёвый эффект.

[@Serator]

В 17 альфе все нормально отображается.

[@memtew]

В Chrome 22.0.1229.0 dev-m все примеры отображаются корректно, спасибо за перевод.

[@amureki]

Спасибо!
Маленькое личное пожелание: в таких постах люблю сначала увидеть результат (в данном случае, демо) и, если он того стоит, посмотреть реализацию.

[@Alex_sik]

ie10 — все ок

[@fritz321]

Все красиво, спасибо за статью — внедрю в магазине какую нибудь красивую кнопочку в этом стиле

[@Anonym]

Это невероятно круто.

[@david_mz]

Как обычно, в хроме на машине со слабым видеоускорителем половина примеров глючит:(

[@fritz321]

у меня все хорошо идет, ноут довольно таки не мощный
21.0.1180.60 m

[@david_mz]

Дело не в мощности ноута как таковой, дело именно в видеоускорителе. У меня древний чипсет, G31, и его видео это не тянет. А Хром тупо сваливает трансформацию на видеокарту, а уж как она там отрисуется, его не заботит:(

Вот тут был аналогичный случай: habrahabr.ru/post/147154/#comment_4959850 (и комменты рядом). Это не только у меня так.

[@nabliker]

Очень оригинальные эффекты.
(Ссылка «Вернуться кстатье» в демонстрации не работает)

[@Firz]

В таких вещах есть интересный вопрос: что проще, дать пользователю скачать n КБ картинок, либо гонять его машину(или планшет, а может вообще телефон с небольшим аккумулятором), прорисовывая это каждый раз.

[@Rome]

Про планшет и смартфон можно вообще забыть, там известная проблема с хувером из-за touch. Там прикосновение — это нажатие. А хувер подразумевает наведение мыши.

[@Firz]

Я подразумевал не ховер, а прорисовку на стороне пользователя.

[@Jemeron]

Кодропс — всегда аппетитная пища для размышлений…

[@CyberLight]

Огромное спасибо за перевод статьи! Статья большая и познавательная. Googel Chrome 22.0.1229.0 dev-m полет отличный. Все эффекты отрабатывают!

[@Alex_sik]

Правда с тач интерфейсом, по моему, не юзабельно.