Как да направите обръщане ефект с помощта на CSS анимация

CSS анимация - това е един много полезен и забавни неща. С няколко прости правила, не можеш да направиш обичайните и елегантни неща, които ще привлекат потребителите към атрактивната си анимация.

Днес ще научите как да се направи една от най-много интересни ефекти с помощта на CSS анимации, а именно избивайки ефект, когато мишката върху картинката, но въпреки това той се нарича обръщане ефект.

HTML маркиране

Тъй като нашата единица със снимка ще бъде на двете страни, направете правилното маркиране:

Ние имаме два класа «пред», който е отговорен за предната част на устройството, което е по подразбиране, с други думи - това е образ. А клас «назад», който е отговорен за картографиране на вътрешната страна, който се появява с хубава анимация когато мишката върху него.

Обзалагам се, че не може да се очаква, че правилата на CSS ще бъдат толкова малко :) Това е всичко, правилата на CSS:

Обръщайки вертикално

По подразбиране устройството е копна хоризонтално, но със сигурност може да се направи, така че той се претърколи и във вертикално, трябва да се добавят няколко правила CSS и всичко:

Подкрепа за Internet Explorer

С Internet Explorer браузър друга история напълно, тъй като е необходимо да се промени почти всички правила, защото до сега много от тях не се поддържат, за съжаление:

Това е всичко, приятели. В много малко усилия можем да направим днес с вас доста сложен и красив ефект с помощта на CSS анимация. Разбира се, това е един много прост пример, можете да промените или да промените, за да отговарят на вашите нужди.

Това е всичко за сега.