css3 - 3D transform doesn't work on ie -

css3 - 3D transform doesn't work on ie -

i 3d transformation , on browsers works fine on ie doesn't work. if have time please see illustration first in normal browser see transform after on ie.

on illustration need click on image.

css. write sass

.item { width: 388px; height: 273px; position: relative; float: left; margin: 0 0 2px 2px; cursor: pointer; outline: 1px solid transparent; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; transition: .5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; img { display: block; width: 388px; height: 273px; } } .top { width: 1170px; margin: 0 auto; .item { .button { content: attr(data-title); top: 100%; width: 100%; height: 50px; position: absolute; left: 0; background: rgba(0, 0, 0,0.7); font-size: 22px; color: #fff; font-weight: 400; line-height: 50px; padding: 0 0 0 15px; text-transform: uppercase; -webkit-transform-origin: 0% 0%; -webkit-transform: rotatex(-90deg); -moz-transform-origin: 0% 0%; -moz-transform: rotatex(-90deg); -ms-transform-origin: 0% 0%; -ms-transform: rotatex(-90deg); transform-origin: 0% 0%; transform: rotatex(-90deg); p { display: inline-block; font-size: 18px; } } &.active { .button { background: rgba(235, 141, 3, 0.7); } } } &.transform-top { .item { overflow: visible; -webkit-transform-origin: 50% 0%; -webkit-transform: rotatex(89.99deg) translatey(-100%); -moz-transform-origin: 50% 0%; -moz-transform: rotatex(90deg) translatey(-100%); -ms-transform-origin: 50% 0%; -ms-transform: rotatex(90deg) translatey(-100%); transform-origin: 50% 0%; transform: rotatex(89.99deg) translatey(-100%); } } }

html

<div class="top"> <div class="item"> <img alt="" src="http://conceptmds.com/demo/wp-content/uploads/2015/02/winter-glory-30-x-30-cm-1-370x260.jpg"> <span class="button">winter glory <p>30 x 30cm</p></span> </div> </div>

live version

live

ie doesn't back upwards transform-style: preserve-3d yet.

you can check http://caniuse.com/#feat=transforms3d

css3 internet-explorer 3d transform preserve-3d