为什么我不能使用jquery修改转换：IE 11中的translation3d CSS？

Question

正如您在下面的代码的第30行中所看到的，我正在尝试使用transform: translate3d()函数将幻灯片中的幻灯片向左移动。这在Chrome中工作正常，但是IE 11无法响应我使用jquery操纵transform: translate3d()的尝试。

要查看其是否无效，请在浏览器中打开代码时尝试单击页面底部的Bulls锚链接。在Chrome中，您会看到显示的名称是Michael Jordan，但在IE 11中，您将看到Magic Johnson。

$("#slider .slides").css("transform","translate3d(-1474px, 0px, 0px)");}为什么无效？我尝试将代码移至$(document).ready部分，并尝试使用百分比而不是像素，但均无效。

<script src="https://code.jquery.com/jquery-1.9.0.min.js" integrity="sha256-f6DVw/U4x2+HjgEqw5BZf67Kq/5vudRZuRkljnbF344=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://louisville.edu/artsandsciences/styles/experimental/flexslider.css" type="text/css" media="screen" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.js"></script>
<script defer src="https://gist.githubusercontent.com/bergantine/3868451/raw/a67f7e7989068013bfd0341cd523b843105c6d8d/gistfile1.js"></script> <!--referred to as modernizr.js in the flexslider package-->

<script type="text/javascript">

    $(window).load(function() {

      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 230,
        itemMargin: 0,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel"
      });   

        /*when this page loads, one of the teams will be pre-selected based on the anchor link in the URL*/
        if(window.location.hash == "#Celtics") {
            $("#slider .slides").css("transform","translate3d(-737px, 0px, 0px)");}
        else if(window.location.hash == "#Bulls") {
            $("#slider .slides").css("transform","translate3d(-1474px, 0px, 0px)");}
        else {
            $("#slider .slides").css("transform","translate3d(0px, 0px, 0px)");}
    });


    $(document).ready(function() {

        $("#carousel span").click(function(){
            $("#carousel span").css("background-color","#e0e0e0");
            $("#carousel span").css("color","#0D3347");
            $(this).css("background","#3d758c");
            $(this).css("color","white");   
            var TeamButtonText = $(this).text();    
            var TeamLogoLink = "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png";
            if(TeamButtonText == "Celtics"){TeamLogoLink = "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/1/logo.png"}
            else if(TeamButtonText == "Bulls"){TeamLogoLink = "http://www.logospng.com/images/80/chicago-watercolor-skyline-silhouette-vector-download-80974.png"}
            else{TeamButtonText == "https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png"}
            $("#banner_studio_logo_pic").animate({height:0},300,function() {
                $('#banner_studio_logo_pic').attr("src", TeamLogoLink);
                $("#banner_studio_logo_pic").animate({height:75},300);
             });
        });     
    });


</script>

<style>

    #topBanner{background: #368dd4; height: 120px;}

    #topBanner span{
        display: inline-block; 
        margin-left: 16px; 
        color: white; 
        margin-top: 35px; 
        font-size: 37px !important;
    }

    #topBanner #banner_studio_logo_pic{
        margin-left: 50px;
        height: 75px;
        vertical-align: middle;
        margin-bottom: 14px;
    }

    #ContentContainer{height: 500px; background-color: #c5c5c5;}
    .flexslider{border: none !important;}
    #carousel{background-color: transparent;}
    #carousel li{text-align: center;}

    #carousel span{
        color: #0D3347; 
        font-size: 20px;
        line-height: 37px;
        text-align: center;
        display: inline-block;
        padding: 0px 10px 0px 10px;
        background-color: #e0e0e0;
    }

    #carousel .slides{margin-top: 16px;}    
    #slider{background: none; width: 737px !important;}
    #slider .flex-nav-prev a, #slider .flex-nav-next a{display: none;}   /*hide the left and right arrows of the slide show body*/
    .Team_Container{width: 737px; text-align: center;}
    .grid_cell{display: inline; margin-right: 33px;}

</style>


<div id="topBanner">
    <span>Teams</span>
    <img id="banner_studio_logo_pic" src="https://d1si3tbndbzwz9.cloudfront.net/basketball/team/18/logo.png">
</div>

<div id="ContentContainer">


    <div id="carousel" class="flexslider">
      <ul class="slides">
        <li><a href="#"><span style="background: rgba(22, 93, 122, 0.5); color: white;">Lakers</span></a></li>
        <li><a href="#"><span>Celtics</span></a></li>
        <li><a href="#"><span>Bulls</span></a></li>
      </ul>
    </div>  

    <div id="slider" class="flexslider">
      <ul class="slides">

        <li id="slide1">
            <div class="Team_Container">    
                <div class="grid_cell"><span>Magic Johnson</span></div>         
                <div class="grid_cell"><span>James Worthy</span></div>          
            </div>          
        </li>  

        <li id="slide2">
            <div class="Team_Container">    
                <div class="grid_cell"><span>Larry Bird</span></div>
                <div class="grid_cell"><span>Kevin McHale</span></div>
            </div>          
        </li>

        <li id="slide3">
            <div class="Team_Container">
                <div class="grid_cell"><span>Michael Jordan</span></div>
                <div class="grid_cell"><span>Scottie Pippen</span></div>    
            </div>  
        </li>
      </ul>
    </div>

</div>

<p><a href="#Lakers" onclick="location.hash='Lakers'; location.reload();">Lakers anchor link test</a></p>
<p><a href="#Celtics" onclick="location.hash='Celtics'; location.reload();">Celtics anchor link test</a></p>
<p><a href="#Bulls" onclick="location.hash='Bulls'; location.reload();">Bulls anchor link test</a></p>