CODEWITHSUNDEEP
jqueryhtmlcss
Stefan
Stefan

Reputation: 1895

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

I got a website Working in Opera Chrome and Firefox but it gets messed up with the preserve-3d feature in Internet Explorer.

Is there a way to fix this just for the internet explorer css code and leave the other browsers code as it is right now?

I hope thats possible.

Css:

.back img{
        max-width: 90%;
        height: auto;
        margin: 1em;
        overflow: hidden;
}

.front{
    margin-top: 0.2em;
    height: 100%;
    width: 100%;
    line-height: 1.2;
    margin-left: 0.2em;
    margin-right: 0.2em;
}


/*Container flip*/


/* flip the pane when clicked */
.flip .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
        transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
}

/* flip speed goes here */
.flipper {
        transition: 0.8s;
        transform-style: preserve-3d;
}

/* hide back of pane during swap */
.front, .back {
        backface-visibility: hidden;
        top: 0;
        left: 0;
}

/* front pane, placed above back */
.front {
        /* for firefox 31 */
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        position:absolute;
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        margin-left: 20px;
        overflow: auto;
        word-break: normal;
        width: 90%;

        color: black;
}

/* back, initially hidden pane */
.back {
        transform: rotateY(180deg);
}

HTML:

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

<div class="flip-container flip">
 <div class="flipper">
  <div class="back">
   <img src="imgsource.png">
  </div>
  <div class="front">
   <p>Some text</p>
  </div>
 </div>
</div>

IF you click on the .flip-container class the .flip class gets removed and the textbox will show up with a nice effect. This doesnt work in Internet Explorer.

Thanks for helping!

Upvotes: 0

Views: 4185

Answers (1)

Billy_Bob
Billy_Bob

Reputation: 85

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

Upvotes: 1

Related Questions