html - 一部のコンピューターで画像が表示されない

Question

これは、私が取り組んでいるコンセプトの CSS です...

画像が表示され、カードにカーソルを合わせると反転します。私が抱えている問題は、一部のコンピューターで動作しないことです。奇妙なことに、私のコンピューターの 1 つで動作しません。ウィンドウズXPです。最新のブラウザでは機能しません。別のコンピューターでは、OSX 10.5 と chrome を実行していました。問題は、 の後方のテキストしか表示されず、通常のビューにフリップすると表示されることです。

.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;
  }

私が追加した場合：

.face.front {
  z-index=10;
}

写真を表示していますが、裏返すと画像がちょうど後ろになります。