0

这是我正在研究的一个概念的 CSS ......

它会显示图片，一旦您将鼠标悬停在卡片上，它就会翻转它。我遇到的问题是它不适用于某些计算机。奇怪的是，它在我的一台电脑上不起作用。是Windows 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;
}

它显示图片，但是当它翻转时，图像只是向后。

4

0 回答 0