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]>
CSS 3D Flip doesn't work in IE10!
Reply With Quote
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.
Bookmarks