How to debug CSS3 3d transformations in IE?

I want to create an animated information bar with CSS3 3D-animations based on the idea of this post.

I was able to recreate the same behaviour which works on Chrome, Firefox and Opera but not in IE: jsFiddle

Now I'm wondering that if there is any way to fix this animation to work in IE too - at least in IE 11?

(The original sample also doesn't work in IE.)

The main trick of this 3D-effect is that you have to create two elements - in this case two span elements - which are perpendicular to each other, and then on some "event" (on a hover or on some change) you rotate the wrapper of these elements by 90 degree:

#info.change #msgWrapper {
    -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
    transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

In IE it looks like that this rotation works but the initial layout is wrong. Unfortunately it is very hard to debug, because the only thing that I can see in the developer toolbar is the transformation matrix - which looks correct...

Any idea on how to fix this stuff to work in IE?

Answers


see this Pages : IE Transforms 3D Hands Maybe Help you...


Need Your Help

Trim spaces before database inserts

java spring hibernate jpa orm

I have a web application wherein i need to do insert data into database using hibernate for several functionalities.

Automatically call httpservice.send

xml flex flex3 httpservice

I have an application that displays the data from 3 xml files (auto generated from SQL table) using httpservices to get them.