0
저는 CSS3를 처음 사용하고 배우려고합니다. 나는 CSS로 간단한 페이지를 만들지 만 크롬에서는 제대로 렌더링하지만 파이어 폭스에서는 렌더링이 잘못된다. 내 코드는 아래와 같습니다. 친절하게 도와주세요.Firefox에서 CSS3 문제
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;
}
이미지
가있는 것 같습니다 유 크롬-webkit-
에 대해 그랬던 것처럼 당신이 너무 불 여우에 대한 CSS를 정의
답장을 보내 주셔서 감사합니다. 귀하의 코드를 사용하지만 여전히 변경 사항은 없습니다. – Milind
코드를 내 코드 – Hushme
으로 바꿔야합니다. 바이올린을 확인하십시오. – Hushme