Rotating div elements with CSS transform on IE

Question

I've got the following CSS hover effect that behaves properly on all browsers but it doesn't on IE. They are three divs, one parent, two children. I want to rotate the parent div in order to show the child's content. you can see the code in https://jsfiddle.net/drz338r9/11// I really appreciate any help.

The html code is:

 <a class="social" href="" target="_blank">
         <div class="front">
         </div>
         <div class="back">
         </div>
  </a>

CSS code is:

      .social {
      float: left;
      width: 100px; 
      height: 100px;    
      position: relative;
     -ms-transform: rotateY(0deg);
     transition: transform .25s ease-out;
     transform-style: preserve-3d;
    }
    .social > div {
      width: 100px; height: 100px;
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    }
    .social >.front {
      transform:translateZ(40px);
      width: 100px; 
      height: 100px; 
      background: red;
    }
    .social >.back {
      background: #3B5998; 
     -ms-transform: rotateY(-100deg) translateZ(40px);
     transform:rotateY(-100deg) translateZ(40px);
       width: 100px; 
        height: 100px; 
       background: black;
    }
    .social:hover {
      -ms-transform: rotateY(100deg);
      transform: rotateY(100deg);
    }

== UPDATE ==

Based on helpful comments, the solution could be found here:https://jsfiddle.net/ohqxnxnn/

On which version of IE you checking? if it is like <= IE10, use vendor prefix `-ms-` to the css properties. — Mr_Green, May 20 '15 at 04:15
yes. I am using IE>=10 and the vendor prefix too. The effects work but in a different way, I don't if i have to use extra rules. — D.B, May 20 '15 at 04:35

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

I did some research for you and looked at your code. The issue is that IE does not support preserve-3d completely. Luckily, there is a few work arounds here: CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Hope that helps, bud.

edited May 23 '17 at 12:05

Community

1
1

answered May 20 '15 at 04:31

ARLCode

651
6
20

score 0 · Answer 2 · answered May 20 '15 at 04:47

There is detailed answer for "CSS3 Solutions for Internet Explorer" in smashing magazine article you can refer this : http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Also you can include : http://modernizr.com/docs/

and

html5shiv

Hope this will help you,

score 0 · Accepted Answer · answered May 21 '15 at 18:52

As other users said, the problem is that IE doesn't support preserve-3d

To solve it, you need to apply all the transforms on the child elements, the initial ones and the rotated ones

.social {
  float: left;
  width: 100px; 
  height: 100px;    
  position: relative;
}
.social > div {
    width: 100px; height: 100px;
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    transition: transform .25s ease-out;
}
.social > .front {
    width: 100px; 
    height: 100px; 
    background: red;
    transform: translateZ(40px);
}
.social:hover .front {
    transform: rotateY(90deg) translateZ(40px);
}
.social >.back {
     transform:rotateY(-90deg) translateZ(40px);
     width: 100px; 
     height: 100px; 
     background: black;
}

.social:hover .back {
     transform:rotateY(0deg) translateZ(40px);
}

<a class="social" href="" target="_blank">
     <div class="front">
     </div>
     <div class="back">
     </div>
   </a>

Rotating div elements with CSS transform on IE

3 Answers3