在Chrome中翻转动画，显示非活动侧的一半元素

Question

我使用翻转卡CSS3动画将一个包含卡图像和图标的div翻转到另一侧，该div包含另一个卡图像和图像。

我一直遇到的问题是，当在Google Chrome中查看页面时，每当显示div的背面时，显示的div的左手边似乎会溢出对面的元素。因此，当点击左手侧的图标时，实际上，背面相同位置的图标就是被点击的图标。

我构建了一个JS Fiddle来说明这个问题，同时也表明这个问题发生在Google Chrome中。在卡片翻转一次后，单击左侧图标会激活卡片另一侧的图标。无论卡片以何种方式翻转，右手图标都不会受到影响。

这里是JSFiddle：https://jsfiddle.net/Gavmastaphlex/a48cxdhm/76/

如果有人能帮忙，我们将不胜感激！

HTML

<div class="flip-card flip-back">
<div class="flip-card-inner">
<div class="flip-card-front">
<img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
<img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="" />
<img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-1.jpg" alt="">
</div>
<div class="flip-card-back">
<img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
<img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="" />
<img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-2.jpg" alt="">
</div>
</div>
</div>

CSS

.flip-card {
background-color: transparent;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin: 0 auto;
}
.flip-card, .flip-card .cardImage {
width: 300px;
height: 417px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
overflow: visible !important;
transition: transform 0.8s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0px 0px 10px #AAA;
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
color: black;
}
/* Style the back side */
.flip-card-back {
color: white;
transform: rotateY(180deg);
}
.cardIcon {
display:block;
position: absolute;
top: 0;
width: 50px;
cursor:pointer;
cursor:hand;
}
#helpImage {
left:0;
}
#removeCard {
right:0;
}

Answer 1

只需更改此样式的

.flip-card-back {
color: white;
transform: rotateY(180deg) translateZ(1px);   /* added 1px in z */
}

这将使这张卡的一侧在转动时位于另一侧的前面，并使被点击的项目成为

var rotate = 0;
$(document).ready(function() {
$('.draw').on('click', function() {
updateDeck();
});
$('.cardIcon').on('click', function() {
alert($(this).attr('id') + ' has been clicked!');
})
})
function updateDeck() {
rotate += 180;
$('.flip-card-inner').css('transform', 'rotateY(' + rotate + 'deg)')
}

p {
font-size: 30px;
text-align: center;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
background-color: transparent;
perspective: 1000px;
/* Remove this if you don't want the 3D effect */
margin: 0 auto;
}
.flip-card,
.flip-card .cardImage {
width: 300px;
height: 417px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
overflow: visible !important;
transition: transform 0.8s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0px 0px 10px #AAA;
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
color: black;
}
/* Style the back side */
.flip-card-back {
color: white;
transform: rotateY(180deg) translateZ(1px);   /* added 1px in z */
}
.cardIcon {
display: block;
position: absolute;
top: 0;
width: 50px;
cursor: pointer;
cursor: hand;
}
#helpImage {
left: 0;
}
#removeCard {
right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="draw">Click to flip</p>
<div class="flip-card flip-back">
<div class="flip-card-inner">
<div class="flip-card-front">
<img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
<img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="" />
<img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-1.jpg" alt="">
</div>
<div class="flip-card-back">
<img id="helpImage" class="cardIcon" src="https://gavmcgz.github.io/img/question.png" />
<img id="removeCard" class="cardIcon" src="https://gavmcgz.github.io/img/minus.png" alt="" />
<img class="cardImage" src="https://gavmcgz.github.io/games/orleans/img/cards/1-2.jpg" alt="">
</div>
</div>
</div>