Preserve 3D Not Working on Ie11

Preserve 3d not working on ie11

Internet Explorer doesn't support preserve-3d in any version (probably Spartan will).

You need to change the way you have set the transforms if you want it to work (on the item directly instead of the container)

.container{  perspective: 1500px;}.canvas{    position: relative;    width: 300px;    transform-origin: 50% 50% 0;    transform-style: preserve-3d;    overflow: visible;}.canvas img{  max-width: 100%;  backface-visibility: hidden;  position: relative;  z-index: 2;    transition: transform 1s ease 0s;}input:checked + .canvas img {  transform: rotateY(180deg);}.red{  background: red;  width: 100%;  height: 100%;  position: absolute;  top:0;  left:0;  z-index: 1;  backface-visibility: hidden;  transform:  rotateY(180deg);    transition: transform 1s ease 0s;}input:checked + .canvas .red {  transform: rotateY(360deg);}

<div class="container">  <input type="checkbox">  <div class="canvas">    <img src="http://todofondosdeamor.com/wp-content/uploads/images/48/gatitos-1__400x300.jpg">    <div class="red"></div>  </div></div><p>That checkbox over there</p>

Transform-Style preserve-3d in internet explorer CSS not working

It Aleksander Bavdaz, provides the answer and the fix here:

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.

CSS3 3D Transform doesn't work on IE11

Internet Explorer Preserve 3D fix

Internet Explorer 10 and 11 only partially support 3D transforms. (Older versions of Internet Explorer do not support this property).

Internet Explorer 10 and 11 'have only partial support' because:

not supporting the transform-style: preserve-3d property. This
prevents nesting 3D transformed elements.

In answer to your question

Note The W3C specification defines a keyword value of preserve-3d for
this property, which indicates that flattening is not performed. 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.

This is suggesting to apply the transform of the parent manually on the child element. So the 3d transform stated on your parent (.flip1) should also be placed on your child element(s) (.back and .front) as well.

Does IE11 support css 3d transforms fully (preserve-3d)

Microsoft are adding support for transform-style: preserve-3d. It is supported in IE for Windows 10 tech preview.

Source: http://status.modern.ie

Blog: http://blogs.msdn.com/b/ie/archive/2014/11/11/living-on-the-edge-our-next-step-in-interoperability.aspx

Using 3D transform flip is not working in IE11 (mine is different)

I had run into the same problem earlier and found that making the back-face visible in the flipped state solves it. So for your case, adding the below lines should fix the issue in IE11 (and also IE10).

#card.flipped figure{
  backface-visibility: visible;
}

$('#one').click(function() {  if ($(this).is(':checked')) {    $("#card").addClass("flipped");    $(".back #append").append("<p>First one</p>")  }});$('#two').click(function() {  if ($(this).is(':checked')) {    $("#card").addClass("flipped");    $(".back #append").append("<p>second one</p>")  }});$('#three').click(function() {  if ($(this).is(':checked')) {    $("#card").addClass("flipped");    $(".back #append").append("<p>third one</p>")  }});$('#close').click(function() {  $("#card").removeClass("flipped");});

.container {  width: 200px;  height: 260px;  position: relative;  -ms-perspective: 800px;  perspective: 800px;}#card {  width: 100%;  height: 100%;  position: absolute;  -ms-transform-style: preserve-3d;  transform-style: preserve-3d;  transition: transform 1s;}#card figure {  display: block;  position: absolute;  width: 100%;  height: 100%;  backface-visibility: hidden;  margin: 0px;  padding: 0px;}#card .front {  background: red;}#card .back {  background: blue;  -ms-transform: rotateY(180deg);  transform: rotateY(180deg);}#card.flipped {  -ms-transform: rotateY(180deg);  transform: rotateY(180deg);}#card.flipped figure {  backface-visibility: visible;}#close {  position: absolute;  bottom: 0px;  right: 0px;  color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section class="container">  <div id="card">    <figure class="front">      <input type="checkbox" id="one" />one      <br></br>      <input type="checkbox" id="two" />two      <br></br>      <input type="checkbox" id="three" />three      <br></br>    </figure>    <figure class="back">      <div id="append"></div>      <div id="close">        <button>close</button>      </div>    </figure>  </div></section>

CSS3 3D Transform doesn't work on IE11

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);
}

CSS 3D animation not working correctly in IE11

I'm not able to debug a matrix3d value, but I can emulate the effect by editing your animation:

 @keyframes mykeyframes {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }
 }

http://jsfiddle.net/e45q5/2/

CSS 3d transform-style preserve-3d Internet Explorer 11 Workaround

So the answer to this question was that since preserve-3d doesn't exist in internet explorer 11, that I move the perspective property from the parent container(container) down to the carousel itself.

See code snipped:

.container {width: 210px;left:300px;top:200px;height: 140px;position: relative;}#carousel{    width: 100%;    height: 100%;    position: absolute;    perspective: 1000px;}#carousel figure{    margin: 0;    display: block;    position: absolute;    width: 186px;    height: 116px;    left: 10px;    top: 10px;    border: 2px solid black;}#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }

<!doctyle html><html><section class="container"><div id="carousel"><figure>1</figure><figure>2</figure><figure>3</figure><figure>4</figure><figure>5</figure><figure>6</figure><figure>7</figure><figure>8</figure><figure>9</figure></div></section></html>

Preserve 3D Not Working on Ie11