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


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
Kosten
Дата: Пятница, 19.08.2016, 00:00 | Сообщение # 2
Администраторы
Сообщений:12696
Награды: 39


Angerfist, всегда пригодиться для сайта, а точнее в его создание.

Brung
Дата: Пятница, 19.08.2016, 01:39 | Сообщение # 3
Пользователи
Сообщений:111
Награды: 0


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


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


No regrets

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