3

Not sure what's wrong, this demo is working fine on chrome and firefox but not IE (not even on 11), I'm unable to debug. I need help.

In IE this css doesn't seem can reflect any changes :

.face.back {
  display: block;
  color: #000;
  font-size: 3.5em;
  background-color: #f6eb34;
  border-radius: 3px;
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

https://codepen.io/collosic/pen/KsfwD

Eunice Chia
  • 355
  • 1
  • 11
  • I think the problem is `preserve-3d`, IE doesn't support –  Jul 28 '16 at 07:43
  • @blonfu I know that, how to make it work then? – Eunice Chia Jul 28 '16 at 08:04
  • Check this: http://jsfiddle.net/Tinclon/2ega7yLt/7/ I found in this thread: http://stackoverflow.com/questions/13474210/css3-3d-flip-animation-ie10-transform-origin-preserve-3d-workaround –  Jul 28 '16 at 08:26
  • @blonfu this doesn't fit my problem – Eunice Chia Jul 28 '16 at 09:18
  • I get this: https://codepen.io/blonfu/pen/xOzmqO?editors=1100 I haven't time now to finish but just need to animate the green box, and then the reverse flip. Is not perfect but is a start point –  Jul 28 '16 at 09:44
  • @blonfu it's now broken in chrome lol – Eunice Chia Jul 28 '16 at 11:51
  • 1
    maybe I change some class for all browser instead only for IE, but you can do a diferent stylesheet for IE –  Jul 28 '16 at 11:55

0 Answers0