image flip via CSS not working in all browsers - html

Question

i m flipping an image through CSS and its wirking in mozila.but in all other browsers its not working.i m unable to know what i m missing here.
Here is my code for image:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="http://placehold.it/300x300"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
and Here is my CSS:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}
</style>

Answer 1

You are using bleeding edge CSS properties.
transform, for example, only works unprefixed in IE 10, Firefox and Opera.
You can get support in webkit based browsers by duplicating the property with a -webkit- prefix (since the implementation is still considered experimental in that engine).
See also: can I use