Firefox的CSS3问题

debugcn 发表于 Dev

米林德

我是CSS3的新手，正在尝试学习。我用css制作了简单的页面，但是它在chrome中可以正常显示，但是在Firefox中，它显示不好。我的代码如下。请帮助我。

看起来CSS CSS中的face类存在问题

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/css3flip.css" />
  </head>
  <body>


<section id="game">
  <div id="cards">
    <div id="card">
      <div class="face front"></div>
      <div class="face back cardAK"></div>
    </div> <!-- .card -->
    <div id="card">
      <div class="face front"></div>
      <div class="face back cardAQ"></div>
    </div> <!-- .card -->
  </div> <!-- #cards -->
</section> <!-- #game -->

<footer>
  <p>This is an example of flipping cards with CSS3.</p>
  <p>Click on the card to flip.</p>
</footer>

<script src="js/jquery-1.10.2.min.js"></script>
<script>

  $(function(){
    $("#cards").children().each(function(index){
      // listen the click event of each card DIV element.
      $(this).click(function(){
        // add the class "card-flipped"
        // the browser animate the styles between current state and card-flipped state.
        $(this).toggleClass("card-flipped");
      });
    });
  });
</script>
</body>
</html>

的CSS

#game {
background: #9c9;
padding: 5px;
}

#card {
-webkit-perspective: 600;
width: 80px;
height: 120px;
margin: 8px;
}

.face {
border-radius: 10px;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: all .3s;    
-webkit-backface-visibility: hidden;
} 

.front {
background: #966;
z-index: 10;
}

.back {
background: #eaa;
-webkit-transform: rotate3d(0,1,0,-180deg);
z-index: 8;
}

.card-flipped .front {
-webkit-transform: rotate3d(0,1,0,180deg);
z-index: 8;
}

.card-flipped .back {
-webkit-transform: rotate3d(0,1,0,0deg);
z-index: 10;
}

.cardAK {
background: url(../images/AK.png) no-repeat;
}

.cardAQ {
background: url(../images/AQ.png) no-repeat;
}

图片

在此处输入图片说明

舒什梅

http://jsfiddle.net/SANBA/1/

您也-webkit-为火狐定义了css，就像您为chrome所做的那样为chrome和firefox定义的是-moz-

例如，也为firefox添加类似的行

-webkit-transform: rotate3d(0,1,0,-180deg);for chrome
-moz-transform: rotate3d(0,1,0,-180deg); for fire fox

我已经更新了您的CSS，请使用此

 #game {
    background: #9c9;
    padding: 5px;
}
#card {

      width: 80px;
    height: 120px;
position:relative; 
    margin: 8px;
}
.face {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s;
    -webkit-backface-visibility: hidden;
    -moz-transition: all .3s;
    -moz-backface-visibility: hidden;
    transition: all .3s;
    backface-visibility: hidden;
}
.front {
    background: #966;
    z-index: 10;
}
.back {
    background: #eaa;
    -webkit-transform: rotate3d(0, 1, 0, -180deg);
    -moz-transform: rotate3d(0, 1, 0, -180deg);
    transform: rotate3d(0, 1, 0, -180deg);
    z-index: 8;
}
.card-flipped .front {
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
    z-index: 8;
}
.card-flipped .back {
    -webkit-transform: rotate3d(0, 1, 0, 0deg);
    -moz-transform: rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
    z-index: 10;
}
.cardAK {
    background: url(../images/AK.png) no-repeat;
}
.cardAQ {
    background: url(../images/AQ.png) no-repeat;
}