slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 7065
Теги: css, flip, переворот, css3

В этой статье речь пойдет о так называемом flip-эффекте, это когда при наведении на объект он переворачивается и показывается его задняя сторона.

С выходом в свет CSS3 появился целый океан удивительных возможностей для реализации красочных эффектов на сайте без использования js-скриптов.

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

demo

Проще всего будет рассмотреть создание на примере. Заготовим разметку:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta name="viewport" content="width=device-width" />    
	<link rel="stylesheet" href="/css/template.css" type="text/css" />
	<title>Страница</title>
</head>
<body>
	<div class="flip_effect_horizontal">
		<div class="front">front</div>
		<div class="back">back</div>
	</div>
	
	<div class="flip_effect_vertical">
		<div class="front">front</div>
		<div class="back">back</div>
	</div>
</body>
</html>

В разметке у нас есть два блока для flip-эффекта: один  - для горизонтального переворота, второй - для вертикального. Остается добавить необходимые стили, для каждого из них свои:

body {
	margin:0;
}

/* ГОРИЗОНТАЛЬНЫЙ FLIP */

.flip_effect_horizontal {
	/* общие стили */
	width:240px; /* ширина блока с flip */
	height:240px; /* высота блока с flip */
	position: relative; /* позиционируем для дочерних блоков */
	
 	transition:1s; /* скорость поворота */
	transform-style: preserve-3d; /* стиль трансформирования 3-д */
	
	/* для поддержки webkit */
   	-webkit-transition:1s;
  	-webkit-transform-style: preserve-3d;
  	-webkit-transform: rotateY(0deg);
	
	/* для поддержки moz */
   	-moz-transition:1s;
  	-moz-transform-style: preserve-3d;
  	-moz-transform: rotateY(0deg);

}

	.flip_effect_horizontal:hover {
		/* общие стили */
		transform: rotateY(180deg); /* поворачиваем на 180 градусов по горизонтали */
		/* для поддержки webkit */
		-webkit-transform: rotateY(180deg);
		/* для поддержки moz */
		-moz-transform: rotateY(180deg);
	}

.flip_effect_horizontal .front {
	/* общие стили */
	position: absolute; /* абсолютное позиционирование */
  	width: 100%; /* на всю ширину родительского блока */
	height: 100%; /* на всю высоту родительского блока */
  	background: #FF6600; /* цвет фона */
	backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
	
	/* для поддержки webkit */
	-webkit-backface-visibility: hidden;
	
	/* для поддержки moz */
	-moz-backface-visibility: hidden;
}

.flip_effect_horizontal .back {
	/* общие стили */
	position: absolute; /* абсолютное позиционирование */
  	width: 100%; /* на всю ширину родительского блока */
	height: 100%; /* на всю высоту родительского блока */
	background:#00CC00; /* цвет фона */
	backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
	transform: rotateY(180deg); /* отворачиваем задний блок */
	
	/* для поддержки webkit */
	-webkit-backface-visibility: hidden;
	-webkit-transform: rotateY(180deg);

	/* для поддержки moz */
  	-moz-backface-visibility: hidden;
	-moz-transform: rotateY(180deg);
}

/* ВЕРТИКАЛЬНЫЙ FLIP */

.flip_effect_vertical {
	/* общие стили */
	width:240px; /* ширина блока с flip */
	height:240px; /* высота блока с flip */
	position: relative; /* позиционируем для дочерних блоков */
	
 	transition:1s; /* скорость поворота */
	transform-style: preserve-3d; /* стиль трансформирования 3-д */
	
	/* для поддержки webkit */
   	-webkit-transition:1s;
  	-webkit-transform-style: preserve-3d;
  	-webkit-transform: rotateY(0deg);
	
	/* для поддержки moz */
   	-moz-transition:1s;
  	-moz-transform-style: preserve-3d;
  	-moz-transform: rotateY(0deg);

}

	.flip_effect_vertical:hover {
		/* общие стили */
		transform: rotateX(180deg); /* поворачиваем на 180 градусов по горизонтали */
		/* для поддержки webkit */
		-webkit-transform: rotateX(180deg);
		/* для поддержки moz */
		-moz-transform: rotateX(180deg);
	}
	
.flip_effect_vertical .front {
	/* общие стили */
	position: absolute; /* абсолютное позиционирование */
  	width: 100%; /* на всю ширину родительского блока */
	height: 100%; /* на всю высоту родительского блока */
  	background: #FF6600; /* цвет фона */
	backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
	
	/* для поддержки webkit */
	-webkit-backface-visibility: hidden;
	
	/* для поддержки moz */
	-moz-backface-visibility: hidden;
}

.flip_effect_vertical .back {
	/* общие стили */
	position: absolute; /* абсолютное позиционирование */
  	width: 100%; /* на всю ширину родительского блока */
	height: 100%; /* на всю высоту родительского блока */
	background:#00CC00; /* цвет фона */
	backface-visibility: hidden; /* скрываем контент, который отвернут от пользователя */
	transform: rotateX(180deg); /* отворачиваем задний блок */
	
	/* для поддержки webkit */
	-webkit-backface-visibility: hidden;
	-webkit-transform: rotateX(180deg);

	/* для поддержки moz */
  	-moz-backface-visibility: hidden;
	-moz-transform: rotateX(180deg);
}

Как вы можете увидеть сам процесс поворота реализуется через строки 28-35 для горизонтального и 93-100 для вертикального. До этого производиться лишь подготовка стилей. Если планируете использовать этот код у себя, учтите, что удаление некоторой строки может привести к некорректной работе эффекта.

Блока переднего(front) и заднего(back) вида задается позиционирование абсолютное, чтобы они находились как бы в одном месте в родительском блоке.

 Всё довольно просто и банально, стоит только немного вглядеться в год и разобраться какое свойство за что отвечает. Ссылка на демонстрацию была в начале статьи.

Метод вполне кроссбраузерный, проверялся в последних версия Opera, Mozilla Firefox, Chrome, Safari. Единственный прокол - IE последних версий, не получилось привести выполнение эффекта переворота(flip) к нужному виду.

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

Если у вас появятся идеи или решения этой проблемы, то пишите в комментарии, мы проверим и в случае чего подкорректируем представленный здесь код.

Исходники примера с кодом flip-эффекта вы можете скачать ниже:

download

Комментарии   

0 # Артур 12.01.2016 23:23
Доброго времени суток.

Можно ли реализовать это же только с чтобы переворот происходил по клику мышкой по кнопке
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 13.01.2016 17:38
Цитирую Артур:
Доброго времени суток.

Можно ли реализовать это же только с чтобы переворот происходил по клику мышкой по кнопке


Да, можно, но если вы хотите при клике на кнопку - нужно использовать js, по сути за место свойств :hover, эти свойства добавляются/убираются при событии нажатия, либо можно попробовать добавлять класс.
Ответить | Ответить с цитатой | Цитировать
0 # Ровшан 05.08.2016 13:54
собрал по этому типу сайтик и столкнулся с такой проблемой , при перевороте несколько кнопок не работает в хроме + так как задний элемент больше переднего надо давать оверфло хайден и когда это делаешь в хроме опять таки обе стороны накладываются друг на друга

может кто сможет помочь

сайт egocres.com
Ответить | Ответить с цитатой | Цитировать
-1 # Алексей Литвинов 30.04.2017 14:02
демо не работает на смартфоне, простите, но это незачет :-(
Ответить | Ответить с цитатой | Цитировать
0 # Евгений74 09.08.2017 19:50
вообще в мобильном нормально работает пальцем наживаешь переворачивается, через несколько секунд сам обратно переворачивает. Вот я столкнулся с интересной проблемой(((( вставляю две картинки в CSS как background-image, вторая картинка везде одинаковая а первая лицевая их несколько, так вот у меня лицевая не меняется хотя имя я задаю постоянно разное, но все равно остается одна и та же картинка(((( может конечно у меня в Gridbox html код странно ведет(( ну я понять не могу это же не возможно, почему он не видит остальные картинки а только первую видит, в папке все картинки лежат имена у них отличаются цифрами 1.2.3((
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 1804
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

worldautolady аватар
Здравствуйте, помогите пожалуйста разработать сайт. Что добавить.что убрать ? www.worldautolady.com...
Перейти в тему
staff10@tjcollection.ru аватар
В крупной розничной Компании TJ Collection открыта вакансия Программиста-консультанта. Обязанности:...
Перейти в тему
Design аватар
Здравствуйте! Наша команда занимается созданием и продвижением сайтов под ключ. Основная часть сот...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.