翻转 CSS 过渡显示反向翻转文本

Question

我正在使用以下 CSS 来使用 CSS3 进行翻转过渡：

/* simple */
    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;
                   -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
                   -moz-box-shadow: 1px 1px 1px 1px #ccc;  
                    box-shadow: 1px 1px 1px 1px #ccc;  
        border: 1px solid #fff;


    }

        .flip-container:hover .flipper, .flip-container.hover .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

    .flip-container, .front, .back {
         width: 160px;
         height: 160px;
    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {

z-index: 2;
text-align: center;
    }

    .back {

        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .front .name {
        font-size: 2em;
        display: inline-block;
        background: rgba(33, 33, 33, 0.9);
        color: #f8f8f8;
        font-family: Courier;
        padding: 5px 10px;
        border-radius: 5px;
        bottom: 60px;
        left: 25%;
        position: absolute;
        text-shadow: 0.1em 0.1em 0.05em #333;

        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    .back-logo {
        position: absolute;
        top: 40px;
        left: 90px;
        width: 160px;
        height: 117px;
        background: url(logo.png) 0 0 no-repeat;
    }

    .back-title {
        font-weight: bold;
        color: #00304a;
        position: absolute;
        top: 180px;
        left: 0;
        right: 0;
        text-align: center;
        text-shadow: 0.1em 0.1em 0.05em #acd7e5;
        font-family: Courier;
        font-size: 2em;
    }

    .back p {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 20px;
    }

CSS的实现如下：

 <div class="sidepanel" id="troll">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
    <a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="front" >
     <span style="font-size: 26px; color:#333;">The Best Thing in this World is</span><br />
        <strong style="font-size: 40px; color:red;">SE...</strong></div></a>

<a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="back" style="text-align:center; color:#333;">
  <!-- back content -->
    <span style="font-size: 30px">Secrets!</span>
    <img src="../trial/youmad.png" width="70" height="70" /><br />
    <span style="font-size: 20px">You Mad?</span><br />
    <span style="font-size: 16px">Best College Trolls</span> </div></a>
    </div>
</div>

问题是在某些浏览器中它可以正常工作，在某些浏览器中，我看到前面的文本以及后面的文本颠倒了，就像一个人在镜子中看到一个文本时一样。我不知道它在哪里搞砸了。我确实考虑了浏览器版本和兼容性，但我认为 HTML5 和 CSS3 现在已经足够流行，所有浏览器都支持它们。我也分享一些图片来解释：

Answer 1

使用此代码将解决您的问题

css

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective:1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 

  }
  /* for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: for IE */


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;


}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background-position: center center;
    z-index: 2;
    background:green;
}

.back {
    background: #f2f2f2;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(-180deg);
}

Demo on Jsfiddle

Answer 2

IE 不支持背面可见性

关于 Chrome，请查看here

我也会尝试将 backface-visibility hidden 和 transform-style : preserve-3d 设置为 everything（只是为了检查）