In this i use Html5 with css3. here i take three class 1) flip 2)front 3)back. In flip class i initially defined the size of box which is 200px. in flip class i take front and back class.for rotation i use rotate command "rotateY(180deg)". here RotateX(180deg) can
be used in the place of RotateY(180deg).initially back is hidden nad when mouse hover on the box it flip 180 degree and back is visible and front is hidden.
CODE
<html>
<head>
<style type="text/css">
.flip
{
width:200px;
height:200px;
}
.flip >.front
{
background-color:#0F0;
width:200px;
height:200px;
-webkit-backface-visibility:hidden;
position:absolute;
-webkit-transform:perspective(600px) rotateY(0deg);
transition:-webkit-transform 1s linear 0s;
box-shadow:0px 10px 10px 0px #333;
}
.flip >.back
{
background-color:#009;
width:200px;
height:200px;
-webkit-backface-visibility:hidden;
position:absolute;
-webkit-transform:perspective(600px) rotateY(180deg);
transition:-webkit-transform 1s linear 0s;
box-shadow:0px 10px 10px 0px #666666;
}
.flip:hover >.front
{
-webkit-transform:perspective(600px) rotateY(-180deg);
}
.flip:hover >.back
{
-webkit-transform:perspective(600px) rotateY(0deg);
}
</style>
<title>3d</title>
</head>
<body>
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
</body>
</html>