Създаване на анимации преврат в CSS

Бързо Забележка: Това не е първият учебник по подобен ефект, но всички останали ми се струваше прекалено сложно. В много други статии, добавени повече стилове, за да кодирате примери, а след това да изисква от читателя да дешифрира кой от тях е необходимо и кое не е. В този урок, този въпрос попада, което ви дава само най-необходимите стилове; Можете да украсите всяка страна на всеки ход, както желаете.

HTML5 и CSS3 практика от нула до резултата!

HTML структура за двустранното ефекта, който се очаква:

Искам да се обзаложите, че е версията, продавач на конвенционален увеличена от кода на префикс ще се изненадате колко малко CSS се използва:

Ето един груб преглед на процеса:

Външният контейнера определя срока в цялата областта на анимацията

В действителност, на вътрешния контейнер се обръща чрез завъртане от 180 градуса по време на мишката върху контейнера майка. Тук можете също да се контролира скоростта на прехода. Обръщането на -180 градуса обръща на елементите в обратната посока.

предни и задни елементи са разположени напълно, така че може да "припокриват" помежду си в едно положение; тяхната задната обвивка-видимост скрит, така че недостатъкът на превръщане на елементите по време на анимацията не се показва

В личен елемент Z-индекс е по-висока от възвръщаемостта, така че можете да кодирате на предния елемент на първия, а той все още се появява в горната част

Обратните член се върти на 180 градуса, за да действат като втора страна.

Тук, по принцип, и всички! Сложете тази проста структура на желаното място и да се определят стилове всяка страна да ви хареса!

Превключи CSS преврат

CSS Вертикална преврат

Извършване на вертикална преврат малко по-трудно - трябва да се промени неговата ос. Изходният код трябва да бъдат променени, а картата ще се завърти в обратна посока:

Срещнете някой странност - необходимостта от определяне на точната трансформиране на базата на пиксела вместо 50%.

Превратът винаги е бил класически Типичен пример за това какво може да се направи с CSS анимации, както и в по-малка степен - 3D CSS-анимация. Най-доброто нещо тук е, че участват в действителност много малко CSS. Този ефект е много добре пригоден за HTML5 игри и е идеален като сингъл "карта" ефект. Защо иначе бихте предложили да го използвам?

Редакция: Екип webformyself.

HTML5 и CSS3 практика от нула до резултата!

Най-IT новини и уеб разработки на нашия канал Телеграма