-1

first see my fiddle code,

On hover any div, it will flip, after fliping back side text and style not showing on IE 11

Please check on chrome or Firefox its working fine

Mahendra Kulkarni
  • 1,437
  • 2
  • 26
  • 35
  • 1
    It is very buggy in chrome also – epascarello May 31 '16 at 13:24
  • 1
    [IE does not support the transform-style: perserve-3d property](http://caniuse.com/#feat=transforms3d). Similar question perhaps: http://stackoverflow.com/questions/22848328/css3-3d-transform-dont-work-on-ie11 – applesElmi May 31 '16 at 13:40
  • `#one:hover` to `#eight:hover` - all have the same CSS code, why are you using these selectors separately? You can club them in single. Also you can combine same styles from `#one` to `#eight` into single class and use that class. It would be easier to maintain CSS. – Techie May 31 '16 at 14:41
  • You need to have code when linking a JSFiddle. – Blubberguy22 May 31 '16 at 14:44

1 Answers1

1

Apply rotation not to the parent but to the front and back panels themselves. For this create a front panel, you have only a back one at the moment:

<div id="one">
    <div class="front face">
      <h3 class="text">Developer</h3>
       <span class="glyphicon glyphicon-eye-open"></span>
    </div>        
    <div class="back face center">
        <p>one Back Side</p>
    </div>
</div>

Each panel has backface-visibility:hidden

Demo

P.S. didn't understand why you need preserve-3d...

GL.awog
  • 1,300
  • 1
  • 7
  • 15