嵌套翻转卡和 Apple Safari

大佬教程收集整理的这篇文章主要介绍了嵌套翻转卡和 Apple Safari，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决嵌套翻转卡和 Apple Safari？

开发过程中遇到嵌套翻转卡和 Apple Safari的问题如何解决？下面主要结合日常开发的经验，给出你关于嵌套翻转卡和 Apple Safari的解决方法建议，希望对你解决嵌套翻转卡和 Apple Safari有所启发或帮助；
我正在尝试为登录系统制作嵌套的翻转卡 - 就 Edge、Chrome、Opera 和 firefox 而言是成功的，但 Safari...
我知道 Apple Safari 可以正确旋转卡片的“Hack”，所以我应用了“-webkit-BACkface-visibility: hIDden;”到所有卡片。
不幸的是，Safari 仍然显示我卡片的旋转背面。任何人都可以帮忙吗？

这是我的代码：
CSS

/* The OUTER & INNER flip */
.flip-o-card,.flip-i-card {
  BACkground-color: transparent;
  wIDth: 320px;
  /*border: 1px solID #f1f1f1;*/
  perspective: 1000px;
  margin:0 auto;
}
.flip-o-card {
  height: 480px;
}
.flip-i-card {
  height: 400px;
}
.flip-o-card-inner,.flip-i-card-inner {
  position: relative;
  wIDth: 100%;
  height: 100%;
  text-align: center;
  Transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-o-card.hover .flip-o-card-inner,.flip-i-card.hover .flip-i-card-inner  {
  transform: rotateY(180deg);
}
.login-forgot,.register,.login,.forgot {
  position: absolute;
  wIDth: 100%;
  height: 100%;
  -webkit-BACkface-visibility: hIDden;
  BACkface-visibility: hIDden;
}
.login-forgot,.login {
  BACkground-color: #bbb;
  color: black;
}
.register {
  BACkground-color: #1eff73;
  color: white;
  transform: rotateY(180deg);
}
.forgot {
  BACkground-color: #ff1e1e;
  color: white;
  transform: rotateY(180deg);
}

/* ####################################### */

.toggle-o,.toggle-i {
    text-align: center;
}
.toggle-o {
    padding-top: 50px;
}
.toggle-i {
    padding-top: 0px;
}

jquery：

$(document).ready(function(){
    $('.toggle-o').on('click',function(){
        console.log('Flip button clicked...');
        $('.flip-o-card').toggleClass('hover');
        if( $('div.text-center.toggle-o p').HTML() === "Register" ){
            $('div.text-center.toggle-o p').HTML("Log in");
        } else {
            $('div.text-center.toggle-o p').HTML("Register");
        }
    });
    
    $('.toggle-i').on('click',function(){
        console.log('Switch button clicked...');
        $('.flip-i-card').toggleClass('hover');
        if( $('div.text-center.toggle-i p').HTML() === "Forgot password" ){
            $('div.text-center.toggle-i p').HTML("BACk to log in");
        } else {
            $('div.text-center.toggle-i p').HTML("Forgot password");
        }
    });
 
});

HTML：

<div class="flip-o-card">
    <div class="flip-o-card-inner">
        <div class="login-forgot">
            
            <div class="flip-i-card">
                <div class="flip-i-card-inner">
                    <div class="login">
                        <p>login</p>

                    </div>
                    <div class="forgot">
                        <p>forgot</p>

                    </div>
                </div>
            </div>
            <div class="text-center toggle-i">
                <p>Forgot password</p>
            </div>
            
        </div>
        <div class="register">
            <p>register</p>
        </div>
    </div>
</div>
<div class="text-center toggle-o">
    <p>Register</p>
</div>

解决方法

大佬总结

以上是大佬教程为你收集整理的嵌套翻转卡和 Apple Safari全部内容，希望文章能够帮你解决嵌套翻转卡和 Apple Safari所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。