Проблема с CSS3 с Firefox

Я новичок в CSS3 и стараюсь учиться. Я делаю простую страницу с помощью css, но она правильно отображается в хроме, но в firefox это делает плохой. Мой код выглядит следующим образом. Пожалуйста, помогите мне в этом.Проблема с CSS3 с Firefox

Похоже, что проблема в классе лица в CSS 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

источник

2013-07-27 Milind

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

вы определяете CSS для огня лисы тоже, как у сделал для хрома -webkit- для хрома и светлячок это -moz-

добавить аналогичную линию для светлячок слишком , например

-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-27 07:13:16 Hushme

Спасибо за ответ, я использую ваш код, но все равно он не меняется. – Milind

вы должны заменить этот код на мой код – Hushme

Я создал скрипку, пожалуйста, проверьте его – Hushme

Проблема с CSS3 с Firefox

ответ

Смежные вопросы