Наткнулся в сети на этот материал и решил реализовать где нибудь этот эффект, получилось не дурно особенно с
вертикальной анимацией.
Решил что может кому нибудь тоже захочется сделать у себя такой вид материалов или информер, и решил поделиться
ссылкой на сайт источник материала.
Пройдя по ссылке вы увидите описание материала и html структуру с CSS, разобранные отдельно для каждого эффекта.
Текст на английском но и без знаний можно разобраться, хотя про IE всё таки переведите.
Ссылка
А также Демо
Ну и скриншоты:
Если кто решил посмотреть на деле на своём сайте, я накидал немного изменив для теста...
Это не готовое решение, готовый дизайн не стал делать, есть основа и каждый по любому по своему оформит.
Код
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url($IMG_URL1$); background-size: contain;">
</div>
<div class="back"><p><?(substr($MESSAGE$,0,150))?></p>
</div>
</div>
</div>
Код
<style>
.flip-container {
perspective: 1000px;
margin: 5px;
float: left;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 290px;
height: 185px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
}
.back {
transform: rotateY(180deg);
}
</style>
