I am having an issue with 3D transformations on IE browser. It works fine on all other browsers except IE. If you have some time, please check the example first on a normal browser to see the transform and then try on IE.
In the example, you need to click on the image.
CSS is written with Sass
.item {
width: 388px;
height: 273px;
position: relative;
float: left;
margin: 0 0 2px 2px;
cursor: pointer;
outline: 1px solid transparent;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
transition: all .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 Example