Как сделать карточное перелистывание двух картинок?

Question

[Николай]

Всем привет!
Есть две картинки одинакового размера, необходимо что бы при наведении они сменялись с эффектом карточного перелистывания (как старые карточные часы).

Гугление не помогает - выдаёт почти всегда страничное перелистывание.
Спасайте, Господа! :)

Answer 1

[Дмитрий Антипов]

Eсли используете Material Design то думаю подойдет этот пример materialdesignblog.com/Material-Design-Flipper
Тут описывается как сделать тоже самое без Material Design https://davidwalsh.name/css-flip

Comments

[Николай]

на вторую ссылку я натыкался - не совсем то, нужно именно горизонтальное "переламывание"

[Дмитрий Антипов]

Николай: по моему тут несколько вариантов есть https://davidwalsh.name/demo/css-flip.php

[Николай]

Дмитрий Антипов: Вы не совсем правильно поняли. Необходимо что бы картинка "переламывалась" по центру, и верхний край ложился на нижний :)

[Алексей Струков]

Николай: а картинка jpg должна быть и адаптивная?

[Николай]

Алексей Струков: нет, любая; с фиксированными размерами

[Алексей Струков]

Николай: может разделить картинку на 2 отдельные картинки размещенные на соседних блоках, и к верхней половине применить transform?

[Николай]

Алексей Струков: не совсем понимаю о чём вы говорите ^_^

[Алексей Струков]

Николай: https://jsfiddle.net/fxrmrxu3/
Вот это имею ввиду)

[Николай]

Алексей Струков: Что-то в этом есть, спасибо! :)