CODEWITHSUNDEEP
javascripthtmlanimationcss-transitions
tosca
tosca

Reputation: 31

flipping div from flipping content demo not working in IE9

I have created a Flipping div (transitions and 3d transforms) based on http://css3.bradshawenterprises.com Flipping content Demo 1.

It works great on all browsers, but IE 9 does not support transitions and 3D transforms. I don't need the div to FLIP for IE9, but i would like the .face.front side of the image to show, instead the .face.back side appears. I would like to write a JavaScript to say if IE9 or lower, then display .face.front

http://jsfiddle.net/RC7WH/

Upvotes: 0

Views: 1107

Answers (2)

tosca
tosca

Reputation: 31

I solved my own problem. Since IE9 does not support 3D transform, it moved from the face front div to the face back side. i wanted that faceback side to be ignored, so that i would show the facefront side. this is the DIV:

<div class="perspective">
        <div id="f1_container">
            <div class="f1_card shadow">  
                <div class="front face">
                    <img src="images/rocks01.jpg" width="448px" height="276px" alt="rocks talk"/>
                </div>
                <div class="back face center">
                    <img src="images/rocks11.jpg" width="448px" height="276px" alt="rocks talk"/>
                </div>
            </div>
        </div>
      </div>

I created an IE condtion which i placed within the html and now the front side is visible. WHich is all I wanted.

    <!--[if IE 9]><html>
       <style type="text/css">
        .face.back{
           visibility:hidden;
        }
       </style>
    <![endif]-->

This is all I wanted. I have embedded my design in a scroll-parallax horizontal code. Thank you Paul Irish for the HTML5 tag idea. See this in: http://jsfiddle.net/eJnns/113/ Thank you http://jsfiddle.net/Q7YU3/ for the perspective / parent /child that helped me use 3d Transform in Firefox 14.

Upvotes: 2

eiu165
eiu165

Reputation: 6271

if you put the front div second then it will stay on the front in IE9

     <div class="front face">
          <p> front side</p>
     </div> 
     <div class="back face center">
          <p> back side</p>
     </div>

change it to this ...

     <div class="back face center">
          <p> back side</p>
     </div>
     <div class="front face">
          <p> front side</p>
     </div>

see sample in IE9 here http://jsfiddle.net/eiu165/vdrXZ/1/

Upvotes: 0

Related Questions