CSS Transform Not Working Ie

ms-transform not working with IE 11

Based on the comments on your question you could then check the IE version with something like this:

http://jsfiddle.net/jquerybyexample/gk7xA/

And insert the transform property with or without the prefix -ms- according to this checkup. The example above is just pure JavaScript because:

The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.

EDIT:

And actually you said you are using jQuery 1.7.2 so you could use the jQuery method to detect the browser and version.

Documentation: http://api.jquery.com/jquery.browser/

webkit-transform not working in Internet Explorer

Have you tried -ms-transform:rotateZ(10deg);?

As -webkitis also a vendor specific prefix, you'll have to add those for non-webkit browsers, too.

(like -ms, -moz, -o)

Check out this CSS3 3D Transforms Tutorial for more info:
http://www.pageresource.com/css3/3d-transforms-tutorial/

CSS3 transform not working

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.

css transform translateY not working in ie 11 but working with chrome

It happens cause you put position: fixed in #panel-content so in the ie11 the page is going to be his parent, height: 100% would be the height of the page not the #panel's height

You don't need to use javascript to do this hover, you can do that with this code

here is a fiddle

HTML

<html>
<head><title>Demo</title>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta charset="utf-8">
</head>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
    integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
    crossorigin="anonymous"></script>

<body>
    <div id="panel">
        <div id="panel-content">

        </div>
    </div> 
</body>
</html>

CSS

body 
{
 overflow-x: hidden;
}

#panel
{
    position: fixed;
    right: 0;
    height:180px;
    width:27px;
    margin-top: 50vh;
    transform: translateY(-50%);  

}

#panel-content
{
    border-radius: 10px 0px 0px 10px;
    left: 100%;
    position: absolute;
    background: black;
    height:100%;
    width: 100%
    transition: .2s;
}

#panel:hover #panel-content{
    left: 0;
}

CSS3 transform property working differently in Internet Explorer

Easier Approach

Instead of positioning from the top and left, position instead from the bottom and right. After you've done this, simply change your -50% translations to positive 50%. This will remove the overflow e.g.

.center-center {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

You can see these changes in action here: http://jsfiddle.net/bd17gsss/

It's worth noting that this bug is still filed, and our team will still give it the appropriate consideration when time and cycles permit us to do so.

Original Answer

There appears to be a layout bug with position: absolute in this particular demo. It's behaving similar to position: relative when it shouldn't be. I've opened a bug on this issue for the Internet Explorer team to investigate further.

For now, you could switch your position value from absolute to fixed, which appears to render the centered element correctly. This prevents you from having to use a fixed set of dimensions over and over, and instead allows you to use this approach as a general-purpose .modal style class that will center anything it is applied to.

The obvious caveat with this change is that your element is positioned according to the viewport, and no longer the document itself. This will freeze it on the screen effectively.

.modal {
    position: fixed;
    top: 50%; left: 50%;
    background-color: red;
    transform: translate(-50%, -50%);
}

To demonstrate the success this approach has with various dimensions, we can cycle through a few example sets and test the rendering of the element to ensure it is properly centered:

(function () {

    var xandy,
        index = 0,
        modal = document.querySelector( ".modal" ),
        sizes = [
            { x: "50%"  , y: "30%"   },
            { x: "400px", y: "288px" },
            { x: "25vw" , y: "75vh"  },
            { x: "90%"  , y: "90%"   }
        ];

    setInterval(function changeSize () {
        xandy = sizes[ index++ % sizes.length ];
        modal.style.width = xandy.x;
        modal.style.height = xandy.y;
    }, 1000 );

}());

The end-result can be viewed online here: http://jsfiddle.net/jonathansampson/c00u5ev8/

Rotate and scale does not work in IE11

I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.

While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/
I found one solution (for Firefox), and I thought that could work the same concept for IE.

The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:

  @keyframes loading
  0%
    transform: scale(1);
  50%
    transform: scale(1.2) rotate(0.02deg);
  100%
    transform: scale(1);

I made this trick and works in IE 11

CSS Transform not working properly on Firefox

There are no specific keyframes for moz, opera.
only use @-webkit-keyframes, same counts for animation-name.
Also do all in your hover, also the animation name.

CSS:

#box {
    width:400px;
    height: 400px;
    background-color:#999; 
}

#button{
    width:40px;
    height:40px;
    background-color:#F00;
}

#box:hover #button{
    -webkit-animation-duration:1s;
    animation-duration:1s;
     -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceIn {
    0% {-webkit-transform: scale(.3);}  
    50% {-webkit-transform: scale(1.05);}
    70% {-webkit-transform: scale(.9);}
    100% {-webkit-transform: scale(1);}
}

@keyframes bounceIn {
    0% {-moz-transform: scale(.3); -o-transform: scale(.3); transform: scale(.3);}
    50% {-moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05);}
    70% {-moz-transform: scale(.9); -o-transform: scale(.9); transform: scale(.9);}
    100% {-moz-transform: scale(1); -o-transform: scale(1); transform: scale(1);}
}

here your updated fiddle:
http://jsfiddle.net/8PDnA/10/

I didn't check if -o-transform exists, but just check it at w3c.