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

我正在使用以下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现在已经足够流行了，所有浏览器都支持它们。我也分享一些图片来说明：

最佳答案

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

的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

关于html - 翻转CSS过渡显示反向翻转文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19057051/