Question

我是CSS3的新手并且正在努力学习。我用css制作简单的页面，但它在chrome中正确渲染，但在firefox中渲染不好。我的代码如下。请帮助我。

看起来css中的face class存在问题 HTML

<!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;
}

图片

enter image description here

Answer 1

<强> http://jsfiddle.net/SANBA/1/

你为fire fox定义了css，就像你对chrome -webkit-所做的那样是对于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;
}

Firefox的CSS3问题

1 个答案: