帶有兩個背景圖像的CSS變換Div

我有一副卡片與甲板上的背景圖像，點擊時他們做一個翻轉動畫，然後將背景圖像更改爲前景圖像，面臨的等同。帶有兩個背景圖像的CSS變換Div

這些卡中的每一個都是一個div。

我的問題是，當卡被點擊後轉身時，前面的背景圖像也被顛倒過來。任何想法如何我可以解決這個問題？

這是我的一個卡的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; 
}

來源

2017-08-01 Adam Silva

實際上，你可以使用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 (
 
    \t 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>

來源

2017-08-01 11:54:35

，但圖像仍然出現點擊之後逆轉.. –

剛剛更新我的答案：CSS變換屬性「規模」是你想要的 –

呀，它解決了scale屬性我問題。謝謝！ –

我建議你使用層

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

來源

2017-08-01 11:54:21

最好保留前面和後面fac的鰭狀物（容器） e並點擊翻頁。

$(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 { 
 
\t perspective: 1000px; 
 
} 
 
.card-container.open .flipper { 
 
\t \t transform: rotateY(180deg); 
 
\t } 
 

 
.card-container, .front, .back { 
 
\t width: 320px; 
 
\t height: 480px; 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.flipper { 
 
\t transition: 0.6s; 
 
\t transform-style: preserve-3d; 
 

 
\t position: relative; 
 
} 
 

 
/* hide back of pane during swap */ 
 
.front, .back { 
 
\t backface-visibility: hidden; 
 

 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 
/* front pane, placed above back */ 
 
.front { 
 
\t z-index: 2; 
 
\t transform: rotateY(0deg); 
 
} 
 

 
/* back, initially hidden pane */ 
 
.back { 
 
\t 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')" > 
 
\t <div class="flipper"> 
 
\t \t <div class="front"> 
 
\t \t </div> 
 
\t \t <div class="back"> 
 
\t \t </div> 
 
\t </div> 
 
</div>

來源

2017-08-01 12:27:11

帶有兩個背景圖像的CSS變換Div

回答

相關問題