CSS 3d Transform in IE

Question

I'm trying to create a vertical flip effect, but can't get it to work at all in any version of IE.

I tried adding the preserve 3d fix to the child elements but still nothing was working so I'm completely lost now.

Here is a jsfiddle: https://jsfiddle.net/y3x706o3/ As you can see, it works properly in chrome etc, but in IE there is no flip and the back colour from .creation:after shows through on top of the images.

Is there any way I can get this to work in IE? I'm certain that it will not be the same as chrome, but is there a way to have the images move to revel the text underneath at all? I'm willing to look at javascript alternatives too.

HTML

        <div class='flip-container left-section'>
            <div class='creation'>
                <div class='front'>
                    <div class='cont'>
                        <img src="http://lorempixel.com/246/300/" alt="blah blah">
                    </div>
                </div>
            </div>
        </div><!-- 
         --><div class='flip-container right-section'>
            <div class='creation'>
                <div class='front'>
                    <div class='cont'>
                        <img src="http://lorempixel.com/574/300/" alt="blah blah">
                    </div>
                </div>
            </div>
        </div>

        <div class="back">
            <div class="left-section">
                <h3>Blah</h3>
                <p>hjsad sahjkd kjwdakjkjw dakj wdakjh dwa</p>
            </div>
            <div class="right-section">
                <h3>Foobar</h3>
                <p>jkhwejkadwjh d wa jdwwd jkwdj wd ajk wdkjdewkjljdkwejwd jdwajdwakj ljlk dwa</p>
            </div>
        </div>

        <div class="clearfix"></div>

    </div>

CSS

.flip-container {
      -webkit-perspective:1200;
      -moz-perspective:1200;
      perspective:1200;
      display: inline-block;
      z-index: 400;
      position: relative;
      -webkit-transition:all 0.6s;
      -moz-transition:all 0.6s;
      transition:all 0.6s;
    }
    .left-section {
        width: 30%;
        float: left;
    }
    .right-section {
        width: 70%;
        float: left;
    }
    .flip-container:hover {
        z-index: 998;
    }
    .flip-container:hover .creation {
      -webkit-transform:rotateX(90deg);
      -moz-transform:rotateX(90deg);
    }
    .creation {
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
      width:100%;
      float:left;
      -webkit-transition:all 0.6s;
      -moz-transition:all 0.6s;
      transition:all 0.6s;
      -webkit-transform-style:preserve-3d;
      -moz-transform-style:preserve-3d;
      transform-style:preserve-3d;
    }
    .front {
      -webkit-backface-visibility:hidden;
      -moz-backface-visibility:hidden;
      backface-visibility:hidden;
    }
    .creation:after {
        content: '';
        right: 0px;
        bottom: 0px;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #808080;
        -webkit-transform: rotateY( 180deg );
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
    }
    .creation p {
      color:#666;
      display:block;
      width:auto;
      text-align:center;
      line-height:184px;
      margin:0 30px;
      font-size:20px;
      text-transform:uppercase;
      text-shadow:1px 1px 1px #999;
      font-family:sans-serif;
    }
    .creation p span {
      vertical-align:middle;
      display:inline-block;
      line-height:1.4;
    }
    .cont {
      width:100%;
    }
    .cont img {
        width: 100%;
        display: block;
    }

    .flipbook-cont {
        position: relative;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }
    .flipbook-cont.fold {
        margin-top: 25px;
    }
    .flipbook-cont.flip {
        margin: 50px auto;
        -webkit-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
        -moz-box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
        box-shadow: 0px 11px 20px 0px rgba(50, 50, 50, 0.73);
    }
    .flipbook-cont.fold img {
        display: block;
        width: 100%;
    }
    .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 25px 0;
        background-color: white;
    }
    .back .left-section {
        padding: 0 40px;
    }
    .back .right-section {
        padding: 0 40px;
    }

    @media all and (max-width: 698px) {
        .flipbook-cont {
            display: none;
        }
    }

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

* {
  box-sizing: border-box;
}

Answer 1

Try add in your css styles properties with -ms- prefix. For example:

.flip-container {      
     -ms-perspective:1200;
    -ms-transition:all 0.6s;
}
.flip-container:hover .creation {
      -ms-transform:rotateX(90deg);
}
.creation {
      -ms-transform-style:preserve-3d;
      -ms-transform-origin: 50% 0;
      -ms-transition:all 0.6s;

}
.front {
      -ms-backface-visibility:hidden;
}
.creation:after {
        -ms-transform: rotateY( 180deg );
        -ms-transform-style: preserve-3d;
        -ms-backface-visibility: hidden;
}

You can check on caniuse.com to be sure what works in which browser. Hope this help.