Как сделать такой красивый hover-эффект на элементах?

Question

[Stopy]

На сайте hola.org на некоторых элементах сделан отличный эффект ховера, будто кубик переворачивают. Как это делается? Где почитать про такое или другие крутые эффекты?

Answer 1

[Сергей Наломенко]

Посмотрите этот туториал и всё поймёте.

Comments

[keslo]

Спасибо. Хорошая ссылка.

Answer 2

[Satir01]

Подобные эффекты еще здесь. Справа вверху увидите ссылку на статью.

Answer 3

[Сергей]

это css3 на ховере
почитай документацию по:
transition
transform
opacity
можно и по animation

Comments

[Stopy]

я вижу что можно наклонять, но как сделать, чтобы когда наклонял, там был другой контент (другой вид кнопки)

[Сергей]

Stopy: структура:

в ссылке находится два спана в каждом спане по svg иконке, одна активная которая изначально видна, а вторая трансформирована до сплюснутой и установлено opacity: 0;, при наведении активная кнопка немного трансформируется может даже едет немного вниз и становится opacity: 0; на ее место трансформируется из сплюснутого состояния в нормальное состояние другая иконка с уже заранее измененным цветом, цвет svg иконки задан в css - .active svg use {color: yellow;}, тут немного муторно будет найти точку относительно которой будет трансформироваться элемент с помощью transform-origin

[Сергей]

serzhei: можно и через :before сделать