html - 翻转卡背面在 mac os 中始终为白色,在 windows 和 ubuntu 上工作正常
问题描述
这个翻转卡在 windows chrome、mozilla ubuntu chrome、mozilla 和所有移动设备(包括苹果)上工作得非常好,**但它在 mac chrome 和 mac safari 中不能正常工作..... 问题 翻转过渡工作正常,但背面卡不显示,它会闪烁然后消失,背面将在 mac os 上背景为白色。**
.card-container {
cursor: pointer;
height: 460px;
-webkit-perspective: 600;
-moz-perspective: 600;
-o-perspective:600;
perspective: 600;
position: relative;
margin: 15px auto;
}
img{
width:300px;
height:300px;
}
.card {
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
width: 100%;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.card:hover {
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.card .side {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
border-radius: 6px;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
padding: 25% 0%;
}
.card .back {
background: #8982f6;
color: #FFFFFF;
line-height: 26px;
font-size: 16px;
padding: 8%;
text-align: center;
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
background-repeat: round;
background-image: url("/about-1.png");
z-index: 9999999;
}
.aboutus .founder {
/* padding: 57px 0px; */
background: #FFEBCD;
padding-top: 50px;
padding-bottom: 50px;
}
.card-text{
z-index: 1;
position: absolute;
border: solid 1px #8982f6;
display: block;
text-align: center;
background-color: #8982f6;
color: white;
padding: 10px 0px 0px 0px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
<section class="founder col-lg-12 col-md-12 col-12">
<div class="row founder-fix-row">
<div class="col-lg-12 col-md-12 col-12">
<div class="title-container">
<h2>xxxxxxxxxx</h2>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card-container" [ngClass]="{'card1back' : toggleceo }">
<div class="card">
<div class="card-text col-md-12">
<h3>xxxxxxx</h3>
<p class="medium">CEO - FOUNDER</p>
</div>
<div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
alt="">
</div>
<div class="side back">
jshs shhhs shshhs shhhs shshsh shshhs shshhs shhsh shhs hs sh shhshjsv shjksjhs hskjsj nd Convergys.
</div>
</div>
</div>
<div class="card-showbutton">
<a (click)="toggleceo = !toggleceo">show bio <i class="fas fa-arrow-right"></i> </a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card-container" [ngClass]="{'card2back' : toggleco }">
<div class="card">
<div class="card-text col-md-12">
<h3>sdsd sdsdse</h3>
<p class="medium">CO - FOUNDER</p>
</div>
<div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
alt=""></div>
<div class="side back">Sxkjskjks shjskjs skjskjkjs skjskjkjs tenure in Accenture and Dell. </div>
</div>
</div>
<div class="card-showbutton">
<a (click)="toggleco = !toggleco">show bio <i class="fas fa-arrow-right"></i> </a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="card-container" [ngClass]="{'card3back' : togglecto }">
<div class="card">
<div class="card-text col-md-12">
<h3>skskskks V</h3>
<p class="medium">s, CO - founder</p>
</div>
<div class="side"> <img class="img-fluid" src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=40085e3ea5d8524b7518df890e4aa72d&w=1000&q=80"
alt=""></div>
<div class="side back">smskks skjskjkjs skjslk dshksadasd sajkjasdj dasdhjksad sadkjhsajdas ashdjhasdlsadrflow :D). He swears by
sadsadassadkaasdjsadsad asdsad </div>
</div>
</div>
<div class="card-showbutton">
<a (click)="togglecto = !togglecto">show bio <i class="fas fa-arrow-right"></i> </a>
<!-- <button (click)="togglecto = !togglecto" class="btn btn-md btn-navy maright-23">show bio</button> -->
</div>
</div>
</div>
</section>
解决方案
推荐阅读
- java - Exoplayer PlayerNotificationManager onSwipe
- java - 根据 Dart 中的天数获取日期
- wordpress - 带标题的内嵌缩略图
- c# - Vidual Studio 2017 C# System.Data.OleDb 无法读取较新的 Excel 文件
- python - exec inits 类中的类声明,但函数不起作用
- go - 提取 avro 架构
- ehcache - ehcache 3.8.1 是否仍然使用 ehcache.xml 进行配置?
- javascript - 有没有办法在 html5/Javascript 中指定流视频分辨率/画布大小?
- c++ - 在 Boost Graph 中的两条路径中查找共享边
- django - 未在贝宝沙箱中接收 IPN