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}