Here is the jsfiddle (it's not a good example, in Chrome number 2 is displayed, but with IE number 2 doesn't display) .
.flip {
-webkit-transition: -webkit-transform .22s;
-ms-transition: none;
transition: transform .22s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-ms-transform-style: none;
}
.flippe,
.flop {
background: #ccc;
height: 50px;
width: 50px;
}
.flippe {
-webkit-transform: translateZ(90px);
transform: translateZ(90px);
-ms-transform: translateZ(90px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-110px);
transform: rotateX(-90deg) translateZ(-110px);
-ms-transform: rotateX(-90deg) translateZ(-110px);
}
.flip:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
}
<div class="flip">
<div class="flippe">1</div>
<div class="flop">2</div>
</div>
Related
I'm trying to animate a flipping div so that it resizes correctly to show a second div as backface.
Everything works fine on Chrome, while on Firefox and IE the behavior is quite weird.
<style>
.flip-container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
position: absolute;
top: 0px;
right: 0px;
}
#back.flip {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#front.flip {
-webkit-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-moz-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
-o-transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
transform: rotateY(540deg) scale(2.5,2) translate(90px,62px);
}
#front {
width: 300px;
height: 250px;
}
.flip-container, #back {
width: 750px;
height: 500px;
}
.flipper {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
#front, #back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
position: absolute;
top: 0;
right: 0;
}
#front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
#back {
background: lightblue;
-webkit-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-moz-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-o-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
-ms-transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
transform: rotateY(-540deg) translate(-225px,-125px) scale(0.4,0.5);
}
</style>
<div class="flip-container">
<div class="flipper">
<div id="front">
Text1
</div>
<div id="back">
Text2
</div>
</div>
</div>
<script>
var front = document.getElementById('front');
var back = document.getElementById('back');
front.onclick = function () {
front.className = 'flip';
back.className = 'flip';
}
</script>
Here a fiddle:
https://jsfiddle.net/h6oa0st2/
As you can see it flips only 180 degrees on Firefox instead of the expected 540, while on IE the animation is completely wrong.
I've found out that removing resizing and translating instructions leads to correct flipping, but the effect is of course different from the desired one.
Any hint on how to solve this?
Thanks in advance.
I'm using transform: rotate(-2deg); on a section. When the user hovers over the section, it changes in size using transform: scale(1.1);.
There's one page on my site where I'd like to maintain the rotation, but not the scale when the user hovers over the section. Is there a way to reset transform: scale(1.1); without resetting transform: rotate(-2deg);?
Here's the code in full:
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
Fiddle here.
You could just set the original transform value back again on the hover selector like given below:
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
This would make sure that the rotation stays at -2 degree but the scale would not happen as this selector is more specific and would take precedence over the other generic hover selector.
section {
display: block;
width: 100px;
height: 100px;
padding: 10px;
background: red;
/* Rotate */
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
/* Easing */
-webkit-transition: -webkit-transform .2s ease-in-out;
-moz-transition: -moz-transform .2s ease-in-out;
-o-transition: -o-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
section:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.some-page section:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Just for demo */
section {
margin: 10px;
}
<section>I'm some content</section>
<div class="some-page">
<section>I'm some content</section>
</div>
I found this tutorial on how to CSS flip a div. You can find the result here. now the thing is, i want to keep the puzzle piece flipped to the back after the hover so the information on the back remains visible. Now i'm not very strong in working with css3. So any help on realizing the desired would be very appreciated!
Here is the code i'm using:
html:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="puzzel-stuk">
<div class="front" style="background:url('img/puzzel-links-boven-gesloten.png'); background-repeat:no-repeat; width: 323px; height: 429px;"></div>
<div class="back" style="background:url('img/puzzel-links-boven-open.png'); background-repeat:no-repeat; width: 323px; height: 429px; text-align:left;">
<div class="stap-title">
<h1>Stap 1</h1>
</div>
<div class="stap-tekst" style="margin-left:10px;">
Kies een geschikte achtergrond,<br/>
zodat uw brief meer opvalt<br/>
bij uw potentiële werkgever.
</div>
</div>
</div>
</div>
</div>
css:
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-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;
}
/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/
/* START: Accommodating 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: Accommodating for IE */
.flip-container, .front, .back {
width: 320px;
height: 427px;
font-size:18px;
display:inline-block;
float:left;
}
.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;
}
.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;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-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;
display: none;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-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;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
-ms-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
/*
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
*/
/* START: Accommodating for IE */
.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* END: Accommodating for IE */
.stap-title {
width:40%;
margin:0 auto;
margin-top:10px;
display:block;
position:relative;
}
.stap-tekst {
margin-left:10px;
margin-right:10px;
margin-top:20px;
display:block;
width:auto;
position:relative;
}
Add the following jquery code in your file.
$(document).ready(function(){
$('.flip-container').hover(function(){
$(this).addClass('hoverfixed');
});
});
Add the following two Classes in your CSS.
.hoverfixed .back{
-webkit-transform: rotateY(0deg) !important;
-moz-transform: rotateY(0deg) !important;
-o-transform: rotateY(0deg) !important;
-ms-transform: rotateY(0deg) !important;
transform: rotateY(0deg) !important;
}
.hoverfixed .front{
-webkit-transform: rotateY(180deg) !important;
-moz-transform: rotateY(180deg) !important;
-o-transform: rotateY(180deg) !important;
transform: rotateY(180deg) !important;
}
I don't understand why i cant see Image 2 which is transformed 90deg with some perspective?
It works perfectly in all other browsers.
IE just rocks. IT keeps you busy for next few hours for no reasons.
Html :
<body>
<div class="scene">
<div class="cube">
<div class="cube-face cube-face-front"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"> </div>
<div class="cube-face cube-face-top"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"> </div>
</div>
</div>
Css :
body {
-webkit-transition: all .6s;
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
width: 960px;
margin: 100px auto;
}
.scene {
margin-top: 50px;
width: 300px;
height: 300px;
-webkit-perspective: 3000px;
border: 5px solid black;
}
.cube {
cursor: pointer;
width: inherit;
height: inherit;
position: relative;
-webkit-transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-ms-transition: all 2s;
transition: all 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-15deg) rotateY(-15deg);
-moz-transform: rotateX(-15deg) rotateY(-15deg);
-o-transform: rotateX(-15deg) rotateY(-15deg);
-ms-transform: rotateX(-15deg) rotateY(-15deg);
transform: rotateX(-15deg) rotateY(-15deg);
}
.cube-face {
width: inherit;
height: inherit;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
filter: alpha(opacity=95);
opacity: 0.95;
}
.cube-face-front {
-webkit-transform: translate3d(0,0,0px);
-moz-transform: translate3d(0,0,0px);
-o-transform: translate3d(0,0,0px);
-ms-transform: translate3d(0,0,0px);
transform: translate3d(0,0,0px);
}
.cube-face-top {
-webkit-transform: rotateX(90deg) translate3d(0,-150px,150px);
-moz-transform: rotateX(90deg) translate3d(0,-150px,150px);
-o-transform: rotateX(90deg) translate3d(0,-150px,150px);
-ms-transform: rotateX(90deg) translate3d(0,-150px,150px);
transform: rotateX(90deg) translate3d(0,-150px,150px);
}
.cube:hover {
-webkit-transform: rotateX(-90deg) translate3d(0,150px,150px);
-moz-transform: rotateX(-90deg) translate3d(0,150px,150px);
-o-transform: rotateX(-90deg) translate3d(0,150px,150px);
-ms-transform: rotateX(-90deg) translate3d(0,150px,150px);
transform: rotateX(-90deg) translate3d(0,150px,150px);
}
img {
width: inherit;
height: inherit;
}
Here my code pen
My screen shot
It is simply not supported by IE. See http://caniuse.com/transforms3d
You will notice that IE only has partial support, stating
Partial support in IE10 refers to not supporting the transform-style: preserve-3d property.
I have looked for a polyfill, however it does not seems as though any currently exist. You would have to do this in jQuery if you want full support.
On a side note, I think you have a nice animation, I don't think you should worry about IE, as most people are using Chrome or FF.. too bad IE has to lag behind.
I would want it to flip up/down rather than left/light, so my question is do I need to change the axis or the angle? I'm trying since 2 hours by nothing seems to get that work. Please guide me through this. Here is the fiddle.
HTML
<div class="flip" style="width: X.px; height: X.px;">
<a href="#">
<div class="flip-front">
<img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
</div>
<div class="flip-back">
<img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
</div>
</a>
</div>
CSS
.flip {
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.flip .flip-front {
z-index: 5;
}
.flip .flip-back {
z-index: 0;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip:hover .flip-front {
z-index: 5;
-webkit-transform: rotateY(270deg);
-moz-transform: rotateY(270deg);
-ms-transform: rotateY(270deg);
-o-transform: rotateY(270deg);
transform: rotateY(270deg);
}
.flip:hover .flip-back {
z-index: 5;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
You want to change the axis of rotation, to the X axis in your case. Basically, use rotateX() instead of rotateY() So here's the updated fiddle and the CSS:
.flip {
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.flip .flip-front {
z-index: 5;
}
.flip .flip-back {
z-index: 0;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.flip:hover .flip-front {
z-index: 5;
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
-ms-transform: rotateX(270deg);
-o-transform: rotateX(270deg);
transform: rotateX(270deg);
}
.flip:hover .flip-back {
z-index: 5;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
There's still some weird double rotation happening, but since that was present in your example, I didn't try to fix it as I'm not sure exactly what effect you're going for.
EDIT:
Also, if I understand what's going on, you have an unnecessary duplicate element in there. Here I've removed the extra element and modified the CSS for the same effect by rotating the single element 360 degrees instead of two 180 degrees each. Fiddle. I've also modified the code to apply an absolute width and height to the .flip div so that you don't get the double rotation in Firefox as the div collapses when the element rotates.
HTML:
<div class="flip">
<a href="#">
<div class="flip-front">
<img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
</div>
</a>
</div>
CSS:
.flip {
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
height: 186px;
width: 280px;
}
.flip .flip-front {
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.flip .flip-front {
z-index: 5;
}
.flip:hover .flip-front {
z-index: 5;
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
transform: rotateX(360deg);
}
You mentioned flip:hover two times, that will override the previous one & there is no need to use back part of image that you used filp-back & front. In the rotation part use rotateX(360deg) . This will provide you the perfect solution of the thing that you want.
>
jsfiddle link
jsfiddle
As George Yates said, you have to change the transform to rotateX.
Since you say that you want to have a different image in the back, this is your CSS:
.flip {
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
-webkit-perspective-origin-x: 140px;
-moz-perspective-origin-x: 140px;
-ms-perspective-origin-x: 140px;
perspective-origin-x: 140px;
}
.flip .flip-front, .flip .flip-back {
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.75s;
-moz-transition: 0.75s;
-o-transition: 0.75s;
transition: 0.75s;
}
.flip .flip-front {
z-index: 5;
}
.flip .flip-back {
z-index: 0;
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-o-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.flip:hover .flip-front {
z-index: 5;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.flip:hover .flip-back {
z-index: 5;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
I have also added to the flip class a perspective origin to make your point of view centered. What you see as a rotation to the left is a perspective effect, you are looking to a centered rotation but your point of view is centered in the flip class, that is bigger than the image.
So, your point of view is to the right and makes the rotation look to the left. Seting the perspective origin x at 140px makes it in the center of the image
updated demo