CSS поворот

Сегодня мы с вами рассмотрим такой замечательный эффект, доступный нам благодаря CSS3. Речь идет о вращении блока или изображения. Он изумительно вписался в интерфейс сайта и, освоив данный урок, вы сможете применять данный эффект и в своих проектах.

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

Начнем писать наш CSS. Первое, что нам предстоит сделать, раз мы работаем с 3D преобразованиями, - задать удаление нашего объекта от точки обзора. А вот и первый говнокод:

.flip-container {
	-webkit-perspective:1000;
	-moz-perspective:1000;
	-ms-perspective:1000;
	perspective:1000;
}

Вы можете задать любое другое число. Поэкспериментируйте сами. Для передней (.front) и задней (.back) частей нашей игральной карты необходимо задать абсолютное позиционирование чтобы они «перекрывали» друг друга в конечном положении. Также нам нужно сделать чтобы обратная сторона переворачиваемых элементов во время анимации не отображалась. В этом нам поможет свойство backface-visibility:

.front, .back {
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	backface-visibility:hidden;
	width:100%;
	height:100%;
	position: absolute;
	top: 0;
	left: 0;
}

Зададим z-index для лицевой стороны (чтобы она в дефолтном состоянии была на верху) опишем дефолтные углы поворота относительно вертикальной оси:

/* лицевая сторона размещена над обратной */
.front {
	-webkit-transform: rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 2;
}

/* обратная, изначально скрытая сторона */
.back {
	transform: rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
}

При наведении наши карточки будут поворачиваться, углы их сторон будут меняться с 0 до 180 градусов и со 180 градусов до 0:

/* лицевая сторона размещена над обратной */
.flip-container:hover .front {
	transform: rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
}

/* обратная, изначально скрытая сторона */
.flip-container:hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

Мы близки к завершению нашей работы. Осталось только дать понять браузеру как дочерние элементы должны отображаться в 3D-пространстве. Это свойство должно использоваться совместно со свойством transform и называется transform-style. Применить это свойство следует к блоку с классом .flipper, а не к .back и .front, иначе нас будет ожидать неприятный сюрприз в браузере Opera.

.flipper  {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style: preserve-3d;
}

Ура, у нас получилось. Мы только что научились делать поворот с помощью CSS. Что самое приятное, это поддерживают все современные браузеры. Да-да, пользователи в Internet Explorer также могут увидеть эту красоту начиная с 10 версии. К несчастью, в России сложилась порочная практика тащить за собой вереницу устаревших IE8 и IE9. Вот и мой клиент захотел чтобы в старых браузерах в момент наведения показывалась подсказка. Давайте посмотрим, что мы можем сделать.

Первое, что приходит в голову - воспользоваться директивой @supports. Мы могли бы записать:

@supports (transform-style: preserve-3d) or 
(-moz-transform-style: preserve-3d) or 
(-webkit-transform-style: preserve-3d) {

/* стили для браузеров поддерживающих */
/* 3D преобразования */

}

Увы и ах, даже IE 11 ничего про нее не знает, поэтому воспользуемся старым дедовским способом:

<!--[if lte IE 9]><link href="ie.css" rel="stylesheet"><![endif]-->

В файде ie.css мы и опишем стили, необходимые для нашей подсказки. Я не буду приводить его здесь, т.к. он выходит за рамки данной статьи (да там и нет ничего интересного). Если хотите, можете увидеть его в нашем примере вертикального поворота с помощью CSS. Но что, если нас интересует поворот по-горизонтали? В этом случае наш код трансформируется так:

.vertical.flip-container {
	position: relative;
}

.vertical.flip-container .flipper {
	-webkit-transform-origin: 100% 213.5px;
	-moz-transform-origin: 100% 213.5px;
	-ms-transform-origin: 100% 213.5px;
	transform-origin: 100% 213.5px;
}

.vertical.flip-container:hover .back, 
.vertical.flip-container.hover .back {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.vertical .back,
.vertical.flip-container:hover .front,
.vertical.flip-container.hover .front {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	-ms-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

Пример горизонтального поворота блока с помощью CSS.