3D Transforms using CSS

Using 3D transformations CSS3 allows to format your elements and 3D Transforms. Browser support is also very good if you do not need to target old IE versions.

Example of 3D Transforms:

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

.container{
    /* How pronounced should the 3D effects be */
    perspective: 800px;
    -webkit-perspective: 800px;
    background: radial-gradient(#1E83D6, #aaa);
    width:500x;
    height:480px;
    margin:0 auto;
    border-radius:6px;
    position:relative;
}

.dress-front,
.dress-back{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    width:300px;
    height:333px;
    position:absolute;
    top:50%;
    left:42%;
    margin:-166px 0 0 -100px;
    background:url(http://www.namasteui.com/wp-content/uploads/2015/06/3d1.jpg) no-repeat left center;
    transition:0.8s;
}

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

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

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