CSS3 Image flip Animation issues in IE and Chrome - html

Question

I'm building a personal website and in the header section(i.e div) i've a logo for which i'm trying to add flip animation on hover, to show the content written back of the logo. Need a help in fixing the problem with browser Chrome as well as IE11. Works fine with Mozilla.
<div id="logo">
<div id="logo_card" class="shadow">
<div class="front face">
<img src="./images/logo+.jpg" />
</div>
<div class="back face center">
<p>Sooner the logo will be changed</p>
</div>
</div>
CSS for animation:
#logo{
width:450px;
height:150px;
margin-left:300px;
border-radius: 5px;
z-index: 1;
}
#logo {
perspective: 1000;
}
#logo_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
border-radius: 5px;
}
#logo:hover #logo_card {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-shadow: -5px 5px 5px #aaa;
-webkit-box-shadow: -5px 5px 5px #aaa;
box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border-radius: 5px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 5px;
}
.face.back {
display: block;
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-sizing: border-box;
box-sizing: border-box;
/*padding: 10px;*/
color: white;
text-align: center;
background-color: transparent;
border-radius: 5px;
font-size:20px;
font-family: 'Helvetica Neue',Helvetica,arial,sans-serif;
}
Greately this works fine with Mozilla firefox browser only :(
Thank you,