CSS/Javascript翻转动画在Safari中不起作用
我用CSS和JS制作了一张动画的个人资料卡，当鼠标悬停在上面时，它会翻转并向上和周围拉伸姓名和角色标题，并显示完整的背面卡信息。它在Firefox和Chrome中工作得非常好，但在Safari中却不行 在制作动画时，它确实会翻转并显示所有联系人信息，但在动画结束时，完整的联系人信息将消失，只会恢复到正面的原始“姓名和角色标题”，但会颠倒 完整代码和实时页面可在此处找到： 在阅读了几篇文章之后，我尝试添加“-webkit backface visibility:hidden；”至所有“背面可见性：隐藏；”但是这根本不起作用 我还向“后退”部分添加了一个z索引，该索引修复了它，并在动画结束时显示所有信息，但当它返回时（在停止悬停后），它仍然显示，而不仅仅是“名称和角色标题”CSS/Javascript翻转动画在Safari中不起作用,javascript,css,safari,Javascript,Css,Safari,我用CSS和JS制作了一张动画的个人资料卡，当鼠标悬停在上面时，它会翻转并向上和周围拉伸姓名和角色标题，并显示完整的背面卡信息。它在Firefox和Chrome中工作得非常好，但在Safari中却不行 在制作动画时，它确实会翻转并显示所有联系人信息，但在动画结束时，完整的联系人信息将消失，只会恢复到正面的原始“姓名和角色标题”，但会颠倒 完整代码和实时页面可在此处找到： 在阅读了几篇文章之后，我尝试添加“-webkit backface visibility:hidden；”至所有“背面可见性：
<!-- HTML -->
<!-- language: lang-html -->
<body>
<div class="contact">
<div class="initials">RM</div>
<div class="flip back">
<div class="info">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
<hr/>
<div class="phone">Phone<br/>
<span>(203)555-5555</span>
</div>
<hr/>
<div class="email">Email<br/>
<span>rmarquardt.1@gmail.com</span>
</div>
<hr/>
</div>
<div class="icon-set">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/skype1.svg" class="skype"/>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/874640/delve1.svg" class="delve" />
</div>
</div>
<div class="flip front">
<div class="name">Randy Marquardt</div>
<div class="title">Front End Developer</div>
</div>
</div>
</body>
RM
兰迪·马夸特
前端显影剂
电话
(203)555-5555
电子邮件
马夸特。1@gmail.com
兰迪·马夸特
前端显影剂
/*CSS*/
html{
身高：100%；
}
身体{
身高：100%；
字体系列：“SegoeUI”；
背景：moz线性梯度（顶部，rgba（246230180,1）0%，rgba（237144,23,1）100%）；
背景：webkit线性梯度（顶部，rgba（246230180,1）0%，rgba（237144,23,1）100%）；
背景：线性梯度（至底部，rgba（246230180,1）0%，rgba（237144,23,1）100%）；
}
#跑{
位置：绝对位置；
顶部：20px；
右：20px；
}
.联系方式{
位置：绝对位置；
高度：250px；
宽度：200px；
背景：#37674b；
保证金：自动；
排名：0；
底部：0；
左：0；
右：0；
文本对齐：居中；
}
.联系人.姓名首字母{
边缘顶端：33像素；
颜色：#fff；
字号：80px；
字体系列：“Segoe UI Light”；
左边距：10px；
字母间距：10px；
}
.联系，翻转{
宽度：198px；
边框：1px插图#37674b；
}
.联系，前面{
背面可见性：隐藏；
位置：绝对位置；
背景：#f0；
高度：60px；
底部：0；
文本对齐：居中；
}
.联系人.前面.姓名{
边缘顶部：5px；
字体大小：16px；
线高：25px；
字号：600；
}
.联系人.封面.标题{
字体大小：12px；
字体：斜体；
}
.联系，回来{
背面可见性：隐藏；
溢出：隐藏；
背景：#f0；
位置：绝对位置；
底部：0；
高度：60px；
}
.contact.back.info{
填充物：5px10px；
}
.contact.back.info.name{
字号：18px；
线高：25px；
字号：600；
}
.contact.back.info.title{
字体大小：12px；
字体：斜体；
/*边缘底部：20px*/
}
.contact.back.info.phone、.contact.flip.info.email、.contact.flip.info.skype{
边缘顶部：20px；
字体大小：14px；
字号：600；
}
.contact.back.info div span{
字体大小：12px；
字体大小：正常；
}
.联系人.图标集{
高度：45px；
位置：绝对位置；
保证金：自动；
底部：0；
左：0；
右：0；
文本对齐：居中；
}
.联系人.图标设置img{
宽度：30px；
利润率：0px 15px；
}
/*JS*/
TweenMax.set（'.contact'，{perspective:700}）；
TweenMax.set（'.flip'，{transformStyle:“preserve-3d”}）；
TweenMax.set（'.back'，{rotationY:-180，rotation:180}）；
$（'.contact'）。悬停（函数（）{
var flip=$（this.find（'.flip'）；
var back=$（this.find（'.back'）；
var front=$（this.find（'.front'）；
TweenMax.to（翻转，.7，{rotationX:180}）；
TweenMax.to（[后，前]，.7，{高度：'100%}）；
},
函数（）{
var flip=$（this.find（'.flip'）；
var back=$（this.find（'.back'）；
var front=$（this.find（'.front'）；
TweenMax.to（翻转，.7，{rotationX:0}）；
TweenMax.to（[后，前]，.7，{高度：60}）；
});
/* CSS */
<!-- language: lang-css -->
html {
height:100%;
}
body {
height:100%;
font-family:"Segoe UI";
background: -moz-linear-gradient(top, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%);
background: -webkit-linear-gradient(top, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
background: linear-gradient(to bottom, rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%);
}
#run {
position:absolute;
top:20px;
right:20px;
}
.contact {
position:absolute;
height:250px;
width:200px;
background:#37674b;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .initials {
margin-top:33px;
color:#fff;
font-size:80px;
font-family:"Segoe UI Light";
margin-left:10px;
letter-spacing:10px;
}
.contact .flip {
width:198px;
border:1px inset #37674b;
}
.contact .front {
backface-visibility:hidden;
position:absolute;
background:#f0f0f0;
height:60px;
bottom:0;
text-align:center;
}
.contact .front .name {
margin-top:5px;
font-size:16px;
line-height:25px;
font-weight:600;
}
.contact .front .title {
font-size:12px;
font-style:italic;
}
.contact .back {
backface-visibility:hidden;
overflow:hidden;
background:#f0f0f0;
position:absolute;
bottom:0;
height:60px;
}
.contact .back .info {
padding:5px 10px;
}
.contact .back .info .name {
font-size:18px;
line-height:25px;
font-weight:600;
}
.contact .back .info .title {
font-size:12px;
font-style:italic;
/* margin-bottom:20px; */
}
.contact .back .info .phone, .contact .flip .info .email, .contact .flip .info .skype {
margin-top:20px;
font-size:14px;
font-weight:600;
}
.contact .back .info div span {
font-size:12px;
font-weight:normal;
}
.contact .icon-set {
height:45px;
position:absolute;
margin:auto;
bottom:0;
left:0;
right:0;
text-align:center;
}
.contact .icon-set img {
width:30px;
margin:0px 15px;
}
/* JS */
<!-- language: lang-js -->
TweenMax.set('.contact', {perspective:700});
TweenMax.set('.flip', {transformStyle:"preserve-3d"});
TweenMax.set('.back', {rotationY:-180, rotation:180});
$('.contact').hover(function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:180});
TweenMax.to([back, front], .7, {height:'100%'});
},
function(){
var flip = $(this).find('.flip');
var back = $(this).find('.back');
var front = $(this).find('.front');
TweenMax.to(flip, .7, {rotationX:0});
TweenMax.to([back, front], .7, {height:60});
});