Flip the box or any image.

<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>