3D Transforms using CSS

3D Transforms

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);
}
You may like:  CSS3 required styles

Leave a Reply

Your email address will not be published. Required fields are marked *