带有两个背景图像的 CSS 变换 Div

Question

我在牌组中有几张牌，其背景图像与牌组的背景图像相同，当点击它们时，它们会执行翻转动画，然后将背景图像更改为等效的正面。

这些卡片中的每一个都是一个 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;
}

Answer 1

最好保留一个正面和背面的脚蹼（容器）并在点击时将其翻转。

 $(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');
});

.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);
}

<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>

Answer 2

您实际上可以使用另一个 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>

Answer 3

我建议你使用图层

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

https://www.w3schools.com/cssref/pr_pos_z-index.asp