Databases
StackOverflow2013
Postsdbo
POFlip CSS Transition showing back flip text reversed
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlip CSS Transition showing back flip text reversed
    text
    copied!<p>I am using the following CSS to make a flipping transition with CSS3:</p> <pre><code>/* 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; } </code></pre> <p>Implementation of the CSS is as follows:</p> <pre><code> &lt;div class="sidepanel" id="troll"&gt; &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt; &lt;div class="flipper"&gt; &lt;a href="../articlenew/troll.php?id=&lt;?php echo rand(1,$maxnum);?&gt;"&gt;&lt;div class="front" &gt; &lt;span style="font-size: 26px; color:#333;"&gt;The Best Thing in this World is&lt;/span&gt;&lt;br /&gt; &lt;strong style="font-size: 40px; color:red;"&gt;SE...&lt;/strong&gt;&lt;/div&gt;&lt;/a&gt; &lt;a href="../articlenew/troll.php?id=&lt;?php echo rand(1,$maxnum);?&gt;"&gt;&lt;div class="back" style="text-align:center; color:#333;"&gt; &lt;!-- back content --&gt; &lt;span style="font-size: 30px"&gt;Secrets!&lt;/span&gt; &lt;img src="../trial/youmad.png" width="70" height="70" /&gt;&lt;br /&gt; &lt;span style="font-size: 20px"&gt;You Mad?&lt;/span&gt;&lt;br /&gt; &lt;span style="font-size: 16px"&gt;Best College Trolls&lt;/span&gt; &lt;/div&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>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:</p> <p><img src="https://i.stack.imgur.com/JZ2vP.png" alt="Chrome on Mac OS Version 29.0.1547.76"></p> <p><img src="https://i.stack.imgur.com/nUTxe.png" alt="Safari on Mac OS Version 5.1.7 (7534.57.4)"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload