Images not showing up on some computers - html

Question

This is my CSS for a concept I'm working on...
It displays the picture, and once you hover over the card it flips it. The problem I'm having is that it isn't working on SOME computers. Oddly enough, it doesn't work on one of my computers. It's windows XP. It doesn't work in any of the modern browsers. Another computer experienced it running OSX 10.5, and chrome. The problem being, you only see the backwards text of the , then if flip to the normal view.
.sleeve {
float: left;
margin: 5px;
width: 240px; height: 340px;
perspective: 1000px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
}
.card {
width: 240px;
height: 340px;
transform-style: preserve-3d;
transition: all 0.5s ease-in;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.5s ease-in;
-moz-transform-style: preserve-3d;
-moz-transition: all 0.5s ease-in;
-o-transform-style: preserve-3d;
-o-transition: all 0.5s ease-in;
}
.sleeve:hover .card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #333333;
-webkit-transform: rotateY(180deg);
-webkit-box-shadow: -5px 5px 5px #333333;
-moz-transform: rotateY(180deg);
-moz-box-shadow: -5px 5px 5px #333333;
-o-transform: rotateY(180deg);
-o-box-shadow: -5px 5px 5px #333333;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.face.front img {
height: 340px;
width: 240px;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-o-transform: rotateY(180deg);
-o-box-sizing: border-box;
border: 5px solid #000000;
padding: 5px 0 0 10px;
height: 340px;
width: 240px;
overflow: auto;
color: black;
text-align: left;
background-color: #FFFFFF;
}
If I add:
.face.front {
z-index=10;
}
It shows the picture, but when it flips, the image is just backwards.