ms-Transform在IE9中不起作用

Question

所以我制作了一些闪存卡，它们在所有浏览器中运行良好，除非我无法让它们在IE9中工作。我正在尝试使用ms-transform，我不确定它在IE9中有多少支持。我想我的代码设置正确，但我不是100％确定我之前从未使用过msTransform。我正在使用一个xml文件，在一侧加载图像，然后卡假设用文本答案翻转背面。问题是在IE9中，当我试图翻转卡片时，答案没有任何反应。

以下是检查结果的实时链接：http://cite.nwmissouri.edu/projects/flashcards/FlashCards1234/flashcards.html

这是我的Javascript文件：

var y;
var y2;
var ny=0;
var ny2=180;
var rotYINT;
var rotYINTback;
var random=false;
var ansFirst=false;
var numbersCalled=new Array();
numbersCalled[0]=0;
var origCardNum=0;
var cardNum=0;
var maxCardNum;
var lastNum;

// next three functions flip the cards in Google Chrome, Safari, and Firefox. August 2012
function rotateYDIV(card, backOfCard)
{
    y=document.getElementById(card);
    y2=document.getElementById(backOfCard)
    clearInterval(rotYINT);
    rotYINT=setInterval("startYRotate()",10);
    clearInterval(rotYINTback);
    rotYINTback=setInterval("startYRotateBack()",10);
}

function startYRotate()
{
    ny=ny+1
    y.style.transform="rotateY(" + ny + "deg)"
    y.style.msTransform="rotateY(" + ny + "deg)"
    y.style.webkitTransform="rotateY(" + ny + "deg)"
    y.style.OTransform="rotateY(" + ny + "deg)"
    y.style.MozTransform="rotateY(" + ny + "deg)"
    if (ny==180 || ny>=360) 
    {
        clearInterval(rotYINT)  

        if (ny>=360)
        {
            ny=0
        }   
    }
}

function startYRotateBack()
{
    ny2=ny2+1
    y2.style.transform="rotateY(" + ny2 + "deg)"
    y2.style.msTransform="rotateY(" + ny2 + "deg)"
    y2.style.webkitTransform="rotateY(" + ny2 + "deg)"
    y2.style.OTransform="rotateY(" + ny2 + "deg)"
    y2.style.MozTransform="rotateY(" + ny2 + "deg)"
    if (ny2==360 || ny2>=540)   
    {
        clearInterval(rotYINTback)  

        if (ny2>=540)
        {
            ny2=180
        }   
    }
}




//nextCard and prevCard select the next question to be displayed from the xml sheet
//and display it on the card.
function nextCard()
{
    if(random==false)
    {
        if(cardNum < maxCardNum)
        {
            cardNum+=1;
        }
        else
        {
            cardNum=origCardNum;
        }
    }
    else
    {
        cardNum=randomize();
    }

    if(ansFirst)
    {
        aFirstCardFlip();
    }
    else
    {
        cardFlip();
    }
    questionSwap();
}
function prevCard()
{
    if(random==false)
    {
        if(cardNum > origCardNum)
        {
            cardNum-=1;
        }
        else
        {
            cardNum=maxCardNum;
        }
    }
    else
    {
        cardNum=randomize();
    }

    if(ansFirst)
    {
        aFirstCardFlip();
    }
    else
    {
        cardFlip();
    }


    questionSwap();
}

//cardFlip flips the cards back to the front of the card so that the next question 
//will not start on the answer
function cardFlip()
{
    ny=0;
    ny2=180;
    document.getElementById("card1").style.transform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.msTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.webkitTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.OTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.MozTransform="rotateY(" + ny + "deg)"

    document.getElementById("backOfcard1").style.transform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.msTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.webkitTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.OTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.MozTransform="rotateY(" + ny2 + "deg)"
}
function aFirstCardFlip()
{
    ny=180;
    ny2=360;
    document.getElementById("card1").style.transform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.msTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.webkitTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.OTransform="rotateY(" + ny + "deg)"
    document.getElementById("card1").style.MozTransform="rotateY(" + ny + "deg)"

    document.getElementById("backOfcard1").style.transform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.msTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.webkitTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.OTransform="rotateY(" + ny2 + "deg)"
    document.getElementById("backOfcard1").style.MozTransform="rotateY(" + ny2 + "deg)"
}

function getText(element) {
  if (typeof element.textContent !== 'undefined') {
    return element.textContent;
  }
  else if (typeof element.innerText !== 'undefined') {
    return element.innerText;
  }
  else if (typeof element.text !== 'undefined') {
    return element.text;
  }
}

//questionSwap reads the xml document and swaps the questions 
function questionSwap()
{
    document.getElementById("question").innerHTML=xmlDoc.getElementsByTagName('qText')[cardNum].childNodes[0].nodeValue;
    document.getElementById("answer").innerHTML=xmlDoc.getElementsByTagName('aText')[cardNum].childNodes[0].nodeValue;

    if(xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue != "none")
    {
        document.getElementById("img").src=xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue;
        document.getElementById("img").width=xmlDoc.getElementsByTagName('imageWidth')[cardNum].childNodes[0].nodeValue;
        document.getElementById("img").height=xmlDoc.getElementsByTagName('imageHeight')[cardNum].childNodes[0].nodeValue;
        document.getElementById("img").alt=xmlDoc.getElementsByTagName('imageAlt')[cardNum].childNodes[0].nodeValue;
        document.getElementById("img").style.display="block";
    }
    else if (xmlDoc.getElementsByTagName('imageSrc')[cardNum].childNodes[0].nodeValue == "none")
    {
        document.getElementById("img").style.display="none";
    }
    if(xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue != "none")
    {
        var mp3=xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue;
        var ogg=xmlDoc.getElementsByTagName('audioOgg')[cardNum].childNodes[0].nodeValue;
        var audioContents='<audio id="audio" controls="controls">';
        audioContents+='<source src="'+mp3+'" type="audio/mp3"/>';
        audioContents+='<source src="'+ogg+'" type="audio/ogg"/>';
        audioContents+='This browser may not support the audio tag.</audio>';
        document.getElementById("audioContainer").innerHTML=audioContents;
    }
    else if (xmlDoc.getElementsByTagName('audioMp3')[cardNum].childNodes[0].nodeValue == "none")
    {
        document.getElementById("audioContainer").innerHTML="";
    }
}
//randomize gives the user a random non-repeating card until all cards have been viewed
function randomize()
{
    if(numbersCalled.length==maxCardNum+1)
    {
        numbersCalled=new Array();
        numbersCalled[0]=lastNum;
    }
    var num = Math.floor((Math.random()*(maxCardNum+1)));
    for(var i=0; i<numbersCalled.length;i++)
    {
        if(num==numbersCalled[i])
        {
            num = Math.floor((Math.random()*(maxCardNum+1)));
            i=-1;
        }
    }
    lastNum=num
    numbersCalled[numbersCalled.length]=num;
    return num;
}
function clickRandom()
{
    if(random)
    {
        random=false;
        document.cards.random.value="Randomize";
    }
    else
    {
        random=true;
        document.cards.random.value="Sequential";
    }
}
function clickAFirst()
{
    if(ansFirst)
    {
        ansFirst=false;
        cardFlip();
        document.cards.Afirst.value="Answer First";
    }
    else
    {
        ansFirst=true;
        aFirstCardFlip();
        document.cards.Afirst.value="Question First";
    }
}
//==============================================================
function get_firstChild(n)
{
    y=n.firstChild;
    while (y.nodeType!=1)
      {
      y=y.nextSibling;
      }
    return y;
}

以下是我的css文件：

    @charset "utf-8";
/* CSS Document */

body {
    background:#d7d7da;
}
.page {
    position:relative;
    margin:auto;
    width:480px;
}
.randomize {
    position:absolute;
    top:605px;
    left:90px;
}
.Afirst
{
    position:absolute;
    top:605px;
    right:90px;
}
.card {
    position:absolute;
    top:0px;
    left:80px;
    width:320px;
    max-width:320px;
    height:600px;
    max-height:600px;
    border:1px solid black;
    border-radius:10px;
    background:white;
    display:table;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index:1;
}
.cardContent {
    display:table-cell;
    vertical-align:middle;
    padding:5px;
    max-width:502px;
    max-height:310px;
}

.cardText {
    font-size:22px;
}
.clickForAnswer {
    position: absolute;
    bottom:5px;
    right:5px;
}
.backOfcard {
    position:absolute;
    top:0px;
    left:80px;
    width:320px;
    max-width:320px;
    height:600px;
    max-height:600px;
    border:1px solid black;
    border-radius:10px;
    background:white;
    display:table;
    transform:rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    z-index:0;
}
.backOfcardContent {
    display:table-cell;
    vertical-align:middle;
    padding:5px;
    text-align:center;
    max-width:502px;
    max-height:310px;

}
.answer {
    font-size:26px;
}
#audio {
    max-width:310px;
}
.next {
    position:absolute;
    top:231px;
    right:0px;
    margin-left:30px;
    float: right;
}
.previous {
    position:absolute;
    top:231px;
    left:0px;
    margin-right:30px;
    float:left;
}
#img {
    display:block;
    max-width:310px;
    max-height:590px;
    margin-left:auto;
    margin-right:auto;


}