0

私はCSS3が初めてで、学ぼうとしています。css で簡単なページを作成しましたが、chrome では適切にレンダリングされますが、firefox では正しくレンダリングされません。私のコードは以下の通りです。親切に私を助けてください。

css HTML の 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;
}

画像

ここに画像の説明を入力

ここに画像の説明を入力

4

1 に答える 1

0

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

あなたはFirefox用のCSSを定義します.ChromeはChrome用で-webkit-あり、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;
}
于 2013-07-27T07:13:16.307 に答える