我将如何使翻卡与其他浏览器兼容

Question

这里新

我正在制作一个网站，到目前为止，我希望它与所有浏览器都兼容。我已经在个人资料部分获得了此翻页卡，但是，每当我在Safari或其他非Google Chrome浏览器中尝试使用时，它都会变得很麻烦并同时显示背面和正面。如果有人能提供帮助或指导，将不胜感激。

$my-primary: mat-palette($mat-blue_gray, 800);
$my-accent: mat-palette($mat-green, 400);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}

Answer 1

您可以尝试在下面引用与 IE，MS Edge，Chrome，FireFox和Safari 浏览器兼容的示例。

代码：

   private void update(){
    Map<String, Object> updatedlist = new HashMap<>();
    for(int i=0; i<studentsList.size(); i++){
        updatedlist.put("name", studentsList.get(i).getName());
        updatedlist.put("id", studentsList.get(i).getId());
        updatedlist.put("attended", studentsList.get(i).isAttended());
    }
    DocumentReference document = db.collection("Records").document(rid);
    document.update("students", updatedlist);
}

#container {
	position:relative;
	height:300px;
	width:300px;
	margin:20px auto;
}

#container > div {
	position:absolute;
	left:0;
	top:0;
	width:300px;
	height:300px;
	padding:20px;
	background:#3C404B;
	-webkit-transition:1.5s ease-in-out;
	-moz-transition:1.5s ease-in-out;
	transition:1.5s ease-in-out;
}

#container > div.lower {
	background:#000;
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(180deg);
	-webkit-transform:perspective(800px) rotateY(180deg);
	transform:perspective(800px) rotateY(180deg);
}

#container > div h1 {
	font-size:20px;
	padding:0;
	margin:0;
	color:#fff;
	line-height:40px;
}

#container > div p {
	font-size:11px;
	padding:0;
	margin:0;
	color:#eee;
	line-height:20px;
}

#container > div a {
	color:#ff0;
}

#container > div.upper {
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(0deg);
	-webkit-transform:perspective(800px) rotateY(0deg);
	transform:perspective(800px) rotateY(0deg);
}

#container:hover > div.lower {
	-moz-transform:perspective(800px) rotateY(0);
	-webkit-transform:perspective(800px) rotateY(0);
	transform:perspective(800px) rotateY(0);
}

#container:hover > div.upper {
	-webkit-transform:perspective(800px) rotateY(-179.9deg);
	-moz-transform:perspective(800px) rotateY(-179.9deg);
	transform:perspective(800px) rotateY(-179.9deg);
}

参考：

Flip Card Example link

此外，您可以尝试根据自己的要求修改代码。