Objectives and outcomes

In this tutorial we are going to learn about transformation in CSS3 and using perspective and transform kit in CSS. We can see as we hover on the image below, the image get rotated by some angle and another image appears but the intresting thing to know is there is only a single image and two div which alternatively hide and show themselves.




HTML and CSS code for the above example is given below:

CSS stylesheet:

<style>
.container1{

/* 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;
}

.iphone1,
.iphone2{

/* 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(img/iphone.jpg) no-repeat left center;

/* Animate the transitions */
transition:0.8s;
}

.iphone2{

/* The back side is flipped 180 deg by default */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);

background-position:right center;
}

.container1:hover .iphone1{
/* When the container is hovered, flip the front side and hide it .. */
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}

.container1:hover .iphone2{
/* .. at the same time flip the back side into visibility */
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
</style>

	






HTML code:

<div class="container1">
<div class="iphone1 img-responsive"></div>
<div class="iphone2 img-responsive"></div>
</div>


The perspective property defines how many pixels a 3D element is placed from the view. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself. Note: The perspective property only affects 3D transformed elements!
preserve-3d is a transform-style which specifies that the child element will preserve its 3D position. And in the last the backface-visibility property defines whether or not an element should be visible when not facing the screen. This property is useful when an element is rotated, and you do not want to see its backside.