Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: CSS 3D Flip doesn't work in IE10!

  1. #1
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Unhappy CSS 3D Flip doesn't work in IE10!

    1) Script Title: CSS 3D Flip

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...m/css_3d_flip/

    3) Describe problem: It doesn't seem to work on IE10/9, despite saying that it does, it merely displays the first div but upside down, at least for me. It also says that the script simply displays the reverse tile if the browser is unsupported, which is why I didn't think it would be a problem for users running browsers like IE, but still, it flips, just displays the content upside down which is annoying haha. It's a real shame because I really want to use this script.

    The example on DD doesn't work in IE10 either, but I'm trying to use it here http://vineswalsall.co.uk/jss/index.php (scroll down!)

    Works fine in Chrome / Firefox, if I could at least get it working in IE10 or at least make it so its disabled in IE10 and just displays one side of the div I'd be super happy.

    <3 <3

    I've tried to disable the script in IE using conditional statements but I can't seem to figure it out. Would be excellent if someone could point me in the right direction.
    Last edited by jscheuer1; 01-24-2013 at 04:35 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The only way to be sure is to set all the CSS3 content to display: none; for IE. And to provide alternate content for IE (I chose the content non-CSS3 browsers will see, but you can put anything there and style it however you want).

    Demo:

    http://home.comcast.net/~jscheuer1/s...dbits/flip.htm

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Flip Demo - IE Disabled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    
    div.flip{
    position:relative;
    width: 300px; /* Set default width of flip */
    height: 250px; /* Set default height */
    -webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
    -moz-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    }
    
    
    div.flip div.rotate{
    width: 100%;
    height: 100%;
    -moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
    -webkit-transition: all 0.6s ease-in-out 0.3s;
    -o-transition: all 0.6s ease-in-out 0.3s;
    transition: all 0.6s ease-in-out 0.3s;
    }
    
    div.flip div.rotate > *{ /* Target all children elements */
    position:absolute;
    width: 100%;
    height: 100%;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    }
    
    div.flip div.rotate > div{ /* Target all child DIVs */
    -webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
    background: #eee;
    }
    
    div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
    -moz-transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    }
    
    
    div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
    -moz-transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    }
    
    
    div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    
    
    div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    }
    
    </style>
    <!--[if IE]>
    <style type="text/css">
    div.flip {
    	display: none !important;
    }
    
    div.flipie {
    position:relative;
    width: 300px; /* Set default width of flip */
    height: 250px; /* Set default height */
    }
    
    
    div.flipie div.rotateie, div.flipie div.rotateie > * {
    width: 100%;
    height: 100%;
    }
    
    div.flipie div.rotateie > * { /* Target all children elements */
    position:absolute;
    }
    
    div.flipie div.rotateie > div { /* Target all child DIVs */
    box-sizing: border-box;/* Specify that any border/ paddings do not add to the DIV's total width */
    padding: 8px;
    background: #eee;
    }
    
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="flip" style="display: inline-block; margin-right: 40px">
    <div class="rotate x">
    	<img src="desert.jpg">
    	<div>
    		A desert is a landscape or region that receives an extremely low amount of precipitation, less than enough to support growth of most plants. <br /><br />
    		<img src="desertstrip.jpg" style="margin:0 auto" />
    	</div>
    </div>
    </div>
    
    <div class="flip" style="width: 250px; height: 200px; display: inline-block;">
    <div class="rotate y">
    	<img src="winter.jpg">
    	<img src="coconut.jpg">
    </div>
    </div>
    <!-- IE content -->
    <!--[if IE]>
    <div class="flipie" style="display: inline-block; margin-right: 40px">
    <div class="rotateie">
    	<div>
    		A desert is a landscape or region that receives an extremely low amount of precipitation, less than enough to support growth of most plants. <br /><br />
    		<img src="desertstrip.jpg" style="margin:0 auto" />
    	</div>
    </div>
    </div>
    
    <div class="flipie" style="width: 250px; height: 200px; display: inline-block;">
    <div class="rotateie">
    	<img src="coconut.jpg">
    </div>
    </div>
    <![endif]-->
    </body>
    </html>
    However, as far as I know IE 10 isn't official yet. By the time it is, this code might work in it. Even if it doesn't, it's reasonable to expect it will in IE 11. If it does work in IE 10 when it comes out, then you would revert to the original code and get rid of the two <!--[if IE]> . . . <![endif]--> code blocks. But if it doesn't and does start working in IE 11, you would change both <!--[if IE]> to <!--[if lt IE 11]>
    Last edited by jscheuer1; 01-26-2013 at 04:35 AM. Reason: fix typo in text, earlier - switch alternate content (minor illustrative improvement)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I hugely appreciate you taking the time to have a look at this for me.

    Your IF statement works in IE9 and IE8 but for some reason IE10 still tries to render your demo, and all it does is flip the initial picture backwards. Would I have to make another IF statement for [if lt IE 10] to get it to work? I'm new to IF statements (and css3 in general tbh). Thank you for helping me learn. I want to give you cake.

    EDIT: CLOCKED IT! Thank you so much.

    In the end I realized that since the IF command works in IE9 perhaps there was a way to force IE10 into compatibility view, so I put <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> into the header and now it renders your IF statement perfectly (unless someone turns off compatibility view, but if they're smart enough to do that they probably aren't using IE anyway lulz)

    Thanks a ton man, you are a hero

    Jez
    Last edited by loljez; 01-25-2013 at 04:53 PM. Reason: Because I love you

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    That's odd. I haven't tried out IE 10 yet. I usually wait for the official release of a browser. However, all IE browsers are supposed to respect the <!--[if IE]> . . . <![endif]--> comments. Either you missed a part of the demo code (IE 9 and less degrade gracefully anyway, and/or could be error correcting misuse of the comments) or there's something wrong with IE 10 or MS has in IE 10 changed how IE conditional comments work. The latter seems unlikely, but is possible. If IE 10 is still in development, it's also possible but only a little more likely that the comments don't work correctly in it yet.

    If you want me to check your code, I would need a link to your page. Did my demo work correctly in your IE 10? What sort of IE 10 do you have? Is it a beta, or RC version? Is it a part of something like IE Tester? Or, is it official? I don't think IE 10 is in official release yet though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Hi.

    IE10 is available only for Windows 8 at the moment, I don't think its a beta or preview version? I think its the full deal. IE10 is coming out for Windows 7 later in the year I think.



    Anyways, here's what I ended up doing: http://www.jobsearchsolutions.co.uk/test/index.php

    Works beautifully in Chrome, Firefox, and IE10, 9, 8 just displays the back panel thanks to your IF statement and the forced browser standards. Otherwise in IE10 it just displays the reverse of the first <div> image, no idea why. Feel free to poke around though, I put your ie divs into a separate stylesheet. I owe you a beer haha.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Thanks. But, I'm still scratching my head as to why we must emulate IE 9 to get our alternate content to display as desired in IE 10.

    I notice that you did not answer one of my questions though, which basically was - "How does my demo do in your IE 10?"

    The link again:

    http://home.comcast.net/~jscheuer1/s...dbits/flip.htm

    In IE 10 it should show the text with the smaller image of the dessert on the left and the coconut image on the right. And nothing should happen when you mouse over the content. Does it do that, or does something else happen?
    Last edited by jscheuer1; 01-26-2013 at 04:37 AM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    The pictures just flip backwards/upside down in your demo in IE10. Sorry for not responding quicker about that.


  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Thanks. Very strange. Ah, a quick search (probably should have done so earlier) reveals that with IE 10, MS has dropped conditional comments!!! Oh well. Their reasoning is that there's no longer any need for them because IE 10 is now fully compliant. So either there's something quirky about the CSS3 used in DD's CSS 3D Flip, or IE 10 isn't as fully compliant as MS believes.

    Oddly the effect doesn't work at all in Opera 12.12, which as far as I know is also supposed to be fully compliant.

    There's a way in javascript to find out which version of IE you're dealing with, or at least which rendering engine version (users can choose to emulate lower versions). In a purely CSS effect, that's hardly appropriate. However, for all practical purposes it would be workable and perhaps preferable to forcing IE 10 to emulate IE 9 just so it won't screw up this one thing.

    If you're interested, I'll show you how that would work.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jan 2013
    Posts
    11
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Whats the downsides with forcing IE10 to emulate IE9?

    I'm extremely amateur when it comes to this stuff, I made some websites when I was 16 for video game clans and such, and have randomly decided to get back into it 10 years later (only to find tables are no longer the cool way to design :'( Wrapping my head around divs has been an uphill battle haha).

    Think I'd be happy emulating IE9 for now at least, I feel as though I've taken up enough of your time! But its hugely appreciated! I want to buy you a beer!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    The downside is that IE 10 has many more capabilities than IE 9. If you force it to emulate IE 9 you lose all of that. Anyways, I decided to go ahead with a demo that uses javascript to detect IE 10. At the very least I'd appreciate it if you test it:

    http://home.comcast.net/~jscheuer1/s...s/flipie10.htm

    If you like what you see the tricks are:

    • The stylesheet used by all other browsers must now contain:

      Code:
      .flipie {
      	display: none !important;
      }
    • The conditional comments are all gone, IE 9 and less degrade gracefully with no help.

    • The stylesheet for IE 10 now also contains:

      Code:
      div.flip {
      	display: none !important;
      }
      
      div.flipie {
      display: inline-block !important;
      position:relative;
      width: 300px; /* Set default width of flip */
      height: 250px; /* Set def . . .
    • The IE 10 stylesheet now must be external and its link tag must carry the rel of "alternate stylesheet". It must also come right before the script that decides whether or not to use it:

      Code:
      <link rel="alternate stylesheet" href="flipie10.css" type="text/css">
      <script type="text/javascript">
      (function(){
      	var ie10 = /MSIE (\d+)/.exec(navigator.userAgent);
      	if(ie10 && ie10[1] == 10){
      		var iestyle = document.getElementsByTagName('link'),
      		length = iestyle.length;
      		iestyle = iestyle[length - 1];
      		iestyle.disabled = true;
      		iestyle.disabled = false;
      	}
      })();
      </script>
    • The regular stylesheet can be external as well and should not be an alternate and must come before the above code. The script can be external as well, as long as it's position following the alternate stylesheet remains the same.
    Last edited by jscheuer1; 01-27-2013 at 06:14 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Book Flip
    By Smash54 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-30-2011, 04:55 PM
  2. Page Flip - Do We Have One Here?
    By kevinhannan in forum Looking for such a script or service
    Replies: 3
    Last Post: 11-19-2009, 10:24 PM
  3. My Book Flip Slideshow doesn't work
    By laurag in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 09-28-2009, 05:10 PM
  4. 3d flip
    By midhul in forum JavaScript
    Replies: 0
    Last Post: 12-15-2008, 03:30 PM
  5. Flip Book
    By raggaemuppet in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-08-2007, 01:26 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •