Question

我在Firefox中遇到了问题。

这适用于chrome，safari和mobile。

当您点击该卡时，它会翻转，但您仍然可以看到＆＃34;点击以翻转＆＃34;卡片正面朝向卡片的一部分，将其翻转过来。它显示为颠倒的文本。我已经尝试将css定位为隐藏/显示何时卡css具有＆＃34;翻转＆＃34;类，但它仍然不会消失。

这又是一个Firefox问题。任何建议都会很棒。

＆＃13;

$('.card').click(function(){
 	   $(this).toggleClass('flipped');
	});

＆＃13;

.card-height2: {
	height: 281px;
}
.flip {
	-webkit-perspective: 800;
	perspective: 800;
	position: relative;
	cursor: pointer;
}

.flip .card.flipped {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	background: transparent;
}

.flip .card {
	height: 195px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	transform-style: preserve-3d;
	transition: 0.5s;
}

.flip .card .face {
	-webkit-backface-visibility: hidden ;
	backface-visibility: hidden ;
	z-index: 2;

}

.flip .card .front {
	position: absolute;
	width: 100%;
	z-index: 1;
	background: #2B5168;
}

.flip .card .back {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	padding-left: 5%;
}

.flip .card .back2 {
	-webkit-transform: rotatex(-180deg);
	transform: rotatex(-180deg);
	padding-left: 5%;
	padding-bottom: 13%;
}

.inner {
	margin:0px 
	!important;
}

div.card.card-1 {
	height: 195px;
	background: transparent;
	background: #2B5168;
}

.s7-small {
	font-size: 14px;
}

.s7-percents {
	color: #80c3db;
	font-size: 51px;
	font-weight: 800;
	margin: 0px;
}

.s7-heading1 {
	font-size: 27px;
	text-align: left;
	margin-top: 55px;
	margin-left: 50px;
}

.s7-heading2 {
	font-size: 27px;
	margin: 0px;
}
  
.s7-para {
	font-size: 27px;
	color: #85B9CE;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="row">
  <div class="col-lg-6 p-0">
    <div class="flip s7-card-1">
      <div class="card card-1"> 
        <div class="face front"> 
          <div class="inner"> 
            <p class="s7-heading1">Click to flip</p>
          </div>
        </div> 
        <div class="face back"> 
          <div class="inner"> 
            <p class="s7-small">Flipped!</p>
          </div>
        </div>
    </div>	 
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

http://jsbin.com/yobeweseri/edit?html,css,js,output

Answer 1

将transform: rotateX(0deg);添加到.face.front容器。

请参阅此答案：Backface-Visibility Not Working Properly in Firefox (Works in Safari)

用CSS / JS Firefox问题翻转卡片

1 个答案: