Javascript CSS的怪异行为（元素旋转180%）

我对CSS有一个问题。我正在制作记忆游戏。问题是所有元素都旋转了180%。我不知道为什么

这是一个简单的游戏（和问题）

下面是显示旋转卡片的代码：

#boxcard {
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
    display: table;
        margin: 0px auto;
    width: auto;
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}
#boxcard > div:nth-child(6n+1) {
    clear: both;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
}
.front, .back{
 float: left;
    width: 100px;
    height: 120px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        z-index:2;
  background: #B1B1B1;
   /*   position:absolute;*/

    /*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;

}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
   -moz-transition:0.6s;
     -o-transition:0.6s;
        transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
            position:relative;
            float:left;
 /*display: inline-block;
position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/

-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
    z-index:3;
    position:absolute;
}

---

必须更换标有180度至0度的管路，如下所示：

* {
    margin: 0;
    padding: 0;
}
body {
    font: 18px Verdana;
    color: #FFF;
  /*background: #CCC;*/
}
#picbox {
    margin: 0px auto;
    width: auto;
}
#boxcard {
/*perspective*/
-webkit-perspective:1000;
   -moz-perspective:1000;
    -ms-perspective:1000;
     -o-perspective:1000;
        perspective:1000;
    display: table;
        margin: 0px auto;
    width: auto;
    z-index: 1;
    display: table;
        margin: 0px auto;
    width: auto;
}
#boxcard > div:nth-child(6n+1) {
    clear: both;
}
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg);
}
.front, .back{
 float: left;
    width: 100px;
    height: 120px;
    margin: 5px;
    padding: 5px;
    border: 4px solid #EE872A;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
        z-index:2;
  background: #B1B1B1;
   /*   position:absolute;*/

    /*backface-visibility*/
-webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
     -o-backface-visibility:hidden;
        backface-visibility:hidden;

}
/* flip speed goes here */
.flipper {
/*transition*/
-webkit-transition:0.6s;
   -moz-transition:0.6s;
     -o-transition:0.6s;
        transition:0.6s;
/*transform-style*/
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
            position:relative;
            float:left;
 /*display: inline-block;
position:relative;*/
}
/* hide back of pane during swap */
/* front pane, placed above back */
/* back, initially hidden pane */
.back{
/*transform*/

-webkit-transform:rotateY(0deg);
   -moz-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
     -o-transform:rotateY(0deg);
        transform:rotate(0deg);
    z-index:3;
    position:absolute;
}
#boxbuttons {
    text-align: center;
/*  margin: 20px;*/
    display: block;
    height: 240px;
    margin-bottom:50px;
        top:0;
    left: 0;
    right: 0;
        background-image:url('http://remake.hr/puzzle/images/header6blue.jpg');
}
#boxbuttons .button {
    text-transform: uppercase;
    background: #EE872A;
    padding: 5px 10px;
    margin: 5px;
    border-radius: 10px;
    cursor: pointer;
}
#boxbuttons .button:hover {
    background: #999;
}
#info {
    text-align: center;
/*  margin: 20px;*/
    display: block;
    /*height: 500px;*/
    left: 0;
    right: 0;
        color:black;
}
.botun {
    text-transform: uppercase;
    background: #EE872A;
    padding: 5px 10px;
    /*margin: 5px;*/
    border-radius: 10px;
    cursor: pointer;
    width: 20%;
        text-align: center;
 margin:0 auto;

}

您可以在此处定义要翻转的图像。类“back”与图像一起添加到divs中

我认为问题在于（至少是为什么Firefox 20.0会出现这种情况）并非所有的CSS3转换都是相同的。如果仔细查看

.back

和

.flipped

样式，则

transform

的值（不是任何供应商前缀版本）实际上是错误的。其中is应该是

rotateY（）

，而不是单独的

rotate（）

：

要解决此问题，只需将缺少的

Y

添加到该行中，即可用于两个类样式定义：

.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg); /* Fixed! */
}

.back{
/*transform*/

-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg); /* Fixed! */
    z-index:3;
    position:absolute;
}

这里有一个修正的例子。它似乎纠正了这个问题（至少在Firefox 20.0中是这样），在Google Chrome中仍然可以正常工作（因此它没有意外地破坏任何东西）

---

希望这有帮助！如果您有任何问题，请告诉我。

到底是什么问题？在chrome上似乎可以很好地工作。这是因为你有一个样式声明它们必须旋转

180度
。。。检查第83行到第93行中声明样式的代码块。是否不希望它旋转？顺便说一句，180%是288°，因为你可以看到卡片（卡片内部的图像）是180%旋转的，当你翻转卡片时，使用了错误的轴（X代替Y）哦，啊哈！我可以在Firefox 20.0中看到这一点。您使用什么浏览器查看此内容？（这可能只是一个CSS3兼容性问题？）谢谢您的回答@Serlite。您的代码示例工作得非常好。非常感谢，太好了！很高兴我能帮忙。
.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotate(180deg); /* This seems wrong... */
}

.flipped {
/*transform*/
-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg); /* Fixed! */
}

.back{
/*transform*/

-webkit-transform:rotateY(180deg);
   -moz-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
     -o-transform:rotateY(180deg);
        transform:rotateY(180deg); /* Fixed! */
    z-index:3;
    position:absolute;
}