0

HTML:

<div class="mask">
    <div class="mask-wrapper">
        <div class="front">
            <img src="http://www.biography.com/imported/images/Biography/Images/Profiles/T/Sachin-Tendulkar-20710145-1-402.jpg" />
        </div>
        <div class="back">
            <ul>
                <li>Sachin Tendulkar</li>
                <li>Cricketer</li>
            </ul>
        </div>
    </div>
</div>

CSS:

There's a lot, but, I do css3 transforms like this,

-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
transform: rotate(720deg);

This is not working in IE10 +, works fine in chrome and FX

JS Fiddle

painotpi
  • 6,894
  • 1
  • 37
  • 70
  • probably answers to [this question](http://stackoverflow.com/questions/12622441/why-is-backface-visibility-hidden-not-working-in-ie10-when-perspective-is-applie) may help? – Ilya Streltsyn Jul 15 '13 at 11:21

2 Answers2

2

IE doesn't support preserve-3d. (see this post)

However, this post offers a workaround where you restyle the 3d transforms to apply the perspective to each side of the flip transition.

css (still needs some tweaking)

#container > div.upper {
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    -moz-transform:perspective(800px) rotateY(0deg);
    -webkit-transform:perspective(800px) rotateY(0deg);
    transform:perspective(800px) rotateY(0deg);
}

#container:hover > div.lower {
    -moz-transform:perspective(800px) rotateY(0);
    -webkit-transform:perspective(800px) rotateY(0);
    transform:perspective(800px) rotateY(0);
}

#container:hover > div.upper {
    -webkit-transform:perspective(800px) rotateY(-179.9deg);
    -moz-transform:perspective(800px) rotateY(-179.9deg);
    transform:perspective(800px) rotateY(-179.9deg);
}

FIDDLE

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255
1

Use Internet Explorer prefixes (-ms-*): -ms-backface-visibility: hidden;

glautrou
  • 3,140
  • 2
  • 29
  • 34