flip an image js

1<div class="f1_container">
2    <div class="shadow f1_card">
3        <div class="front face">
4            <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
5        </div>
6        <div class="back face center">
7            <img src="http://media-cdn.tripadvisor.com/media/photo-s/03/48/0b/14/dolphin-view-chalets.jpg" style="height: 281px; width: 450px;" />
8        </div>
9    </div>
10</div>

1.f1_container {
2    position: relative;
3    margin:10px;
4    width: 450px;
5    height: 281px;
6    z-index : 1;
7    float:left;
8}
9.f1_container {
10    -webkit-perspective: 1000;
11    perspective: 1000;
12}
13.f1_card {
14    width: 100%;
15    height: 100%;
16    -webkit-transform-style: preserve-3d;
17    -webkit-transition: all 1.0s linear;
18    transform-style: preserve-3d;
19    transition: all 1.0s linear;
20}
21.f1_container.active .f1_card {
22    -webkit-transform: rotateY(180deg);
23    transform: rotateY(180deg);
24    box-shadow: -5px 5px 5px #aaa;
25}
26.face {
27    position: absolute;
28    width: 100%;
29    height: 100%;
30    backface-visibility: hidden;
31    -webkit-backface-visibility: hidden;
32}
33.face.back {
34    display: block;
35    -webkit-transform: rotateY(180deg);
36    transform: rotateY(180deg);
37    box-sizing: border-box;
38    color: white;
39    text-align: center;
40    background-color: #aaa;
41}