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://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/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);
}
