Отразить анимацию в Chrome, показывая половину элементов с неактивной стороны - PullRequest
Новая
       8

Отразить анимацию в Chrome, показывая половину элементов с неактивной стороны

0 голосов
/ 22 декабря 2018

Я использую анимацию CSS3 для переворачиваемой карты, чтобы перевернуть один 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;
}

1 Ответ

0 голосов
/ 22 декабря 2018

Просто измените этот стиль 

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