Разворот по оси

by Tony Realovich

HTML

<div class="container">
	<div class="iphone-front"></div>
	<div class="iphone-back"></div>
</div>

CSS

.container{

	/* Как должны быть выражены 3D эффекты */
	perspective: 800px;
	-webkit-perspective: 800px;

	background: radial-gradient(#e0e0e0, #aaa);
	width:480px;
	height:480px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
}

.iphone-front,
.iphone-back{

	/* Подключение 3D трансформации */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

       /*Мы используем 2 разных дива для передней и задней части телефона. Это свойство прячет див когда он поворачивается, таким образом будет показываться противоположная сторона*/

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	width:200px;
	height:333px;

	position:absolute;
	top:50%;
	left:50%;
	margin:-166px 0 0 -100px;

	background:url(http://www.codeharmony.ru/demo/2014/02/05/assets/img/iphone.png) no-repeat left center;

	/* Анимация переходов */
	transition:0.8s;
}

.iphone-back{

    /*Задняя сторона поворачивается на 180 градусов по умолчанию*/
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);

	background-position:right center;
}

.container:hover .iphone-front{
    /*Когда на контейнер происходит наведение мышкой и срабатывает hover, повернуть переднюю часть и спрятать её */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.container:hover .iphone-back{
    /*... в то же время повернуть заднюю часть и сделать видимой*/
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}