Question

我正在以下网址创建“艺术家表”：http://beta2.thrivemusic.com/artists/

如您所见，如果您将鼠标悬停在艺术家上方，则会显示3个社交图标。但是，不同的浏览器会出现不同的错误，所以我需要一些关于代码的跨浏览器功能的帮助。

FIREFOX：完美无缺 GOOGLE CHROME：Facebook图标链接不起作用 MOBILE（APPLE + ANDROID）：每个艺术家的正面都没有出现在默认情况下，而是显示背面

以下是我的表现：http://jsfiddle.net/samkimdesign/A7MZ3/2/

/* Artists Flip */

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 175px;
}

#f1_card {
  width: 200px;
  height: 175px;
  transform-style: preserve-3d;
  transition: all 0.4s linear;
}

#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  backface-visibility: inherit;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-image: url("http://beta2.thrivemusic.com/wp-content/uploads/2014/07/flip_back.png");
  backface-visibility: hidden;
  z-index: 9999999999999;
}

非常感谢任何帮助，谢谢！：）

Answer 1

尝试添加

Position: relative

到班级.face.back。

我的情况也一样。为后面div增加相对位置。

CSS Flip Cross Browser功能

1 个答案: