Flip CSS Transition showing back flip text reversed

Question

I am using the following CSS to make a flipping transition with 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;
    }

Implementation of the CSS is as follows:

 <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>

THe problem is that in some browsers it works fine, in some, i see the front text as well as the back text reversed, like when one sees a text in mirror. I have no clue where its messing up. I did gave browser version and compatibility a thought but i think HTML5 and CSS3 are enough popular now and all browsers support them. I am also sharing some images to explain:

Chrome on Mac OS Version 29.0.1547.76

Safari on Mac OS Version 5.1.7 (7534.57.4)

score 2 · Answer 1 · answered Mar 05 '14 at 10:37

Use this code it will solve your problem

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

score 0 · Answer 2 · edited May 23 '17 at 11:53

0

I.E doesn't support backface-visibility

About Chrome, check here

I would also try setting backface-visibility hidden and transform-style : preserve-3d to everything (just to check)

edited May 23 '17 at 11:53

Community

1
1

answered Sep 27 '13 at 18:12

vals

61,425
11
89
138

The first image is of Chrome on Mac OS Version 29.0.1547.76 – Arihant Sep 27 '13 at 18:15

Flip CSS Transition showing back flip text reversed

2 Answers2