Приклад 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://site.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>