Flipbox für "IE"oder"Opera"

Hallo,
Vielleicht kann mir ja Irgendjemand sagen wie ich meine Flipbox auf der Hp ,auch auf dem "IE" oder "Opera" Webbrowser anständig zum laufen bekomme. Suche jetzt schon seit Tagen nach einer Lösung aber suche wohl an der verkehten Stelle.Bin leider auch ein ziemlicher Neuling was CSS/HTML usw. betrifft.
Hier der Code;

[div.flip{
position:relative;
width: 200px;
height: 200px;
-webkit-perspective: 200px;
-moz-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}


div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s;
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *{
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

div.flip div.rotate > div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}


div.rotate.y *:nth-child(2){
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}


div.flip:hover > div.rotate.y{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}]


Wäre wirklich supernett wenn da mal Jemand helfen könnte,Danke.
mfG, Michael[/code]