Страница 1 из 11
Форум про uCoz » Раздел для uCoz » HTML коды для сайта uCoz » Flip эффект с помощью CSS анимации (Как сделать Flipping эффект с помощью CSS анимации)
Flip эффект с помощью CSS анимации
Angerfist
Дата: Четверг, 18.08.2016, 22:36 | Сообщение 1
Vip
Сообщений:761
Награды: 21


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

Пройдя по ссылке вы увидите описание материала и 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>
Прикрепления: 7304450.jpg(44Kb) · 0648868.jpg(25Kb) · 4970715.jpg(21Kb) · 2640010.jpg(37Kb)


No regrets

Сообщение отредактировал
Angerfist - Пятница, 19.08.2016, 01:54
Страна: (RU)
Kosten
Дата: Пятница, 19.08.2016, 00:00 | Сообщение 2
Администраторы
Сообщений:15861
Награды: 51


Angerfist, всегда пригодиться для сайта, а точнее в его создание.
Страна: (RU)
Kolinkor
Дата: Пятница, 19.08.2016, 01:39 | Сообщение 3
Vip
Сообщений:302
Награды: 1


Angerfist, этот эффект можно на вид материала приклеить или фотоальбом. Чтоб как то по оригинальнее сайт смотрелся.
Страна: (RU)
Angerfist
Дата: Пятница, 19.08.2016, 01:58 | Сообщение 4
Vip
Сообщений:761
Награды: 21


Поигрался с параметром perspective, уменьшив до 300px, эффект порадовал smile
CSS свойство perspective


No regrets

Сообщение отредактировал
Angerfist - Пятница, 19.08.2016, 02:02
Страна: (RU)
Форум про uCoz » Раздел для uCoz » HTML коды для сайта uCoz » Flip эффект с помощью CSS анимации (Как сделать Flipping эффект с помощью CSS анимации)
Страница 1 из 11
Поиск: