我在牌组中有几张牌,其背景图像与牌组相同,点击后,他们会进行翻转动画,然后将背景图像更改为前脸等效。
这些卡中的每一张都是div。
我的问题是,当点击卡片后转动时,正面背景图像也会反转。知道如何解决这个问题吗?
这是小提琴:https://jsfiddle.net/667nxfze/
这是我的一张卡片的HTML:
<div id='pack_cont' data-deckimage="url('/image/decks/deck1.png')">
<div class='card init' data-image="url('/image/card/card1.png')"></div>
</div>
以下是对它做出反应的Javascript:
var card = $(this);
card.toggleClass('open');
setTimeout(function(){
card.toggleClass('opened');
},300);
if(card.hasClass('open')){
//Show that card image
card.css('background-image', card.data('image'));
}else{
//Show the Deck Image
card.css('background-image', card.parent().data('deckimage'));
}
以下是CSS类:
.card{
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open{
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.opened{
background-image: none;
}
答案 0 :(得分:4)
最好保留一个带有正面和背面的鳍状肢(容器),并在点击时将其翻转。
$(document).ready(function() {
$('.card-container .front').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('deckimage'));
});
$('.card-container .back').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('image'));
});
});
$('.card-container').click(function() {
var card = $(this);
card.toggleClass('open');
});
&#13;
.card-container {
perspective: 1000px;
}
.card-container.open .flipper {
transform: rotateY(180deg);
}
.card-container, .front, .back {
width: 320px;
height: 480px;
background-size: contain;
background-repeat: no-repeat;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="card-container" data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')" data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')" >
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
我建议您使用图层
<!DOCTYPE html>
<html>
<head>
<style>
img1 {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
img2 {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img1 src="/image/decks/deck1.png">
<img2 src="/image/decks/card1.png">
</body>
</html>
答案 2 :(得分:0)
您实际上可以使用300毫秒的另一个超时来实现过渡效果,如下所示:
$(document).ready(function() {
$('.card').each(function() {
$(this).css('background-image', $(this).parent().data('deckimage'));
});
});
$('.card').click(function() {
var card = $(this);
card.toggleClass('open');
setTimeout(function() {
card.toggleClass('opened');
}, 300);
if (card.hasClass('open')) {
//Show that card image
setTimeout (
function() {
card.css('background-image', card.data('image')); }
, 300)
} else {
//Show the Deck Image
setTimeout (
function() { card.css('background-image', card.parent().data('deckimage')); }
, 300)
}
});
.card {
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open {
-webkit-transform: rotateY( 180deg) scaleX(-1);;
transform: rotateY( 180deg) scaleX(-1);;
}
}
.card.opened {
background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='pack_cont' data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')">
<div class='card init' data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')"></div>
</div>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>