CSS3 3D Transform doesn’t work on IE11

by

IE doesn’t support transform-style: preserve-3d yet.

You have to remove the transform from #header-cube and apply it to each of the figure children. Unfortunately IE already uses the non-prefixed properties, so you either can’t use transform-3d at all or have to define the prefixed properties last.

From the IE transforms documentation:

At this time, Internet Explorer 10 does not support the preserve-3d
keyword. You can work around this by manually applying the parent
element’s transform to each of the child elements in addition to the
child element’s normal transform.

JSFiddle: http://jsfiddle.net/TTDH7/17/

#header-cube {
    transform-style: preserve-3d;
    transform: rotateX(43deg) rotateZ(130deg);
}
figure:nth-child(1) {
    transform: translateZ(-16px);
}
figure:nth-child(2) {
    transform: rotateY(-100deg) translateZ(-16px);
}

becomes:

#header-cube {
    transform-style: preserve-3d;
    -ms-transform-style: none;
    transform: rotateX(43deg) rotateZ(130deg);
    -ms-transform: none;
}
figure:nth-child(1) {
    transform: translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg)
                   translateZ(-16px);
}
figure:nth-child(2) {
    transform: rotateY(-100deg) translateZ(-16px);
    -ms-transform: rotateX(43deg) rotateZ(130deg)
                   rotateY(-100deg) translateZ(-16px);
}

More Related Contents:

  1. Flip a 3D card with CSS
  2. 3d transforms on SVG element
  3. CSS transform doesn’t work on inline elements
  4. Text in a flex container doesn’t wrap in IE11
  5. Rotated elements in CSS that affect their parent’s height correctly
  6. @font-face EOT not loading over HTTPS
  7. CSS 3d transform doesn’t work if perspective is set in the end of property
  8. Simulating transform-origin using translate
  9. @font-face works in IE8 but not IE9
  10. Background-image in keyframe does not display in Firefox or Internet Explorer
  11. How to prevent Webkit text rendering change during CSS transition
  12. Internet Explorer z-index bug?
  13. CSS Transform Skew [duplicate]
  14. Does IE 8 have a limit on number of stylesheets per page?
  15. CSS: Using raw svg in the URL parameter of a background-image in IE
  16. Flex auto margin not working in IE10/11
  17. CSS3 transform order matters: rightmost operation first
  18. Why is text getting blurry and wobbles during 2d scale transform
  19. Custom cursor image doesn’t work in all IEs?
  20. IE and Edge fix for object-fit: cover;
  21. How does ?#iefix solve web fonts loading in IE6-IE8?
  22. CSS3 transform on click using pure CSS
  23. Internet Explorer @font-face is failing
  24. How to make Google Fonts work in IE?
  25. placing background image in a rhombus shaped container is causing the container to lose its shape
  26. webkit transform blocking link
  27. with an inner not triggering :active state in IE 8
  28. filter: blur(1px); doesn’t work in Firefox, Internet Explorer, and Opera
  29. how to make sure select option text align in the center in IE?
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment