Currently, I am working on a 'Flip' effect using the CSS3 transform Property.
While everything seems to be functioning properly in recent versions of Chrome, Firefox, and Safari, I'm facing challenges when it comes to creating a fallback for IE9 and Opera due to their limited support for 2D transforms.
To illustrate the code I'm working with, I have set up a fiddle which you can view by following this link: http://jsfiddle.net/montyhog/SaYUe/9/
My main goal is not necessarily to replicate the effect in these browsers, but rather to establish a fallback where hovering over IMG1 triggers the fade-in of IMG2 on top.
Below is a snippet of the HTML:
<div class="h1older">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/meds.png" /></div>
<div class="back"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/back.png" /></div>
</div>
</div>
</div>And here is the corresponding CSS:
.h1older {
width: 400px;
height: 400px;
border: 1px #ff00d5 dashed;
position: absolute;
top: 0px;
left: 0px;
}
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
-moz-perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
/* Additional styling omitted for brevity */