gpt4 book ai didi

javascript - 使用 CSS/JS Firefox 问题翻转卡片

转载 作者:行者123 更新时间:2023-11-28 15:06:58 24 4
gpt4 key购买 nike

我在 Firefox 中遇到问题。

这适用于 chrome、safari 和移动设备。

当你点击卡片时,它会翻转过来,但当你点击它翻转它时,你仍然可以看到卡片的“点击翻转”正面部分。它显示为颠倒的文本。当卡片 css 具有“翻转”类时,我尝试将 css 定位为隐藏/显示,但它仍然不会消失。

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

$('.card').click(function(){
$(this).toggleClass('flipped');
});
.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;
}
<!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>

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

最佳答案

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

查看此答案:Backface-Visibility Not Working Properly in Firefox (Works in Safari)

关于javascript - 使用 CSS/JS Firefox 问题翻转卡片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49202655/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com