Пример CSS 3D Transforms

Наконец-то наступили времена, когда на чистом CSS можно делать фантастические вещи.

Теперь можно делать вращение объектов в любой плоскости и под любым углом только на CSS.

Для того, что бы добиться такого эффекта - необходим следующий CSS-код:

.container{
	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{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	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://artkiev.com/blog/wp-content/uploads/2013/10/iphone1.png) no-repeat left center;
	transition:0.8s;
}

.iphone-back{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
	background-position:right center;
}

.container:hover .iphone-front{
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.container:hover .iphone-back{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

А так же немного HTML:

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