CSS3 Flip 3D Effect

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .flipBox {
            width: 240px;
            height: 200px;
            margin: 10px;
            float: left;
        }
        .flipBox > .front {
            position: absolute;
            -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
            background: #F00;
            width: 240px;
            height: 200px;
            border-radius: 7px;
            color: #FFF;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: -webkit-transform .5s linear 0s;
            transition: transform .5s linear 0s;
        }
        .flipBox > .back {
            position: absolute;
            -webkit-transform: perspective(600px) rotateY(180deg);
            transform: perspective(600px) rotateY(180deg);
            background: #00F;
            width: 240px;
            height: 200px;
            border-radius: 7px;
            color: #FF0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transition: -webkit-transform .5s linear 0s;
            transition: transform .5s linear 0s;
        }
        .flipBox:hover > .front {
            -webkit-transform: perspective(600px) rotateY(-180deg);
            transform: perspective(600px) rotateY(-180deg);
        }
        .flipBox:hover > .back {
            -webkit-transform: perspective(600px) rotateY(0deg);
            transform: perspective(600px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <div class="flipBox">
        <div class="back"></br>Price1<img src="bag.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box1</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price2<img src="tshirt.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box2</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price3<img src="wrist_watch.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box3</div>
    </div>
    <div class="flipBox">
        <div class="back"></br>Price4<img src="flash.png"/></div>
        <div class="front"></br></br>Hello C# Corner Box4</div>
    </div>
</body>
</html>

Step 2. I will save this file named "filpcss.html" and run it in the Chrome browser to see output like this.

1. Click on the front side of the box.
   
2. Click on box 2, flip the box 2.
   
3. Backside of box 2.
   
4. The backside of box1.
   
5. The backside of box 3.
   
6. The backside of box 4.
   

It is a simple example of the CSS3 Filp3D Effect. Happy coding. Thank you.