"CSS 3D Transforms"
Bootstrap 3.3.0 Snippet by iwebdesigner

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="iphone-front"></div> <div class="iphone-back"></div> </div>
.container{ /* How pronounced should the 3D effects be */ 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{ /* Enable 3D transforms */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* We are using two separate divs for the front and back of the phone. This will hide the divs when they are flipped, so that the opposite side can be seen: */ 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; /* Animate the transitions */ transition:0.8s; } .iphone-back{ /* The back side is flipped 180 deg by default */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-position:right center; } .container:hover .iphone-front{ /* When the container is hovered, flip the front side and hide it .. */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); } .container:hover .iphone-back{ /* .. at the same time flip the back side into visibility */ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }

Related: See More


Questions / Comments: