CSS3 карта Flip Glitch - PullRequest
Новая
       9

CSS3 карта Flip Glitch

1 голос
/ 10 марта 2019

Я создал флип-карту HTML с помощью CSS. Однако, когда карта переворачивается, появляется мерцание (как будто оно почти не переворачивается полностью). Этот сбой происходит в основном, когда курсор перемещается прямо в центр карты.

Любая помощь очень ценится! 

.card-box {
  width: 100px;
  height: 50px;
  position: relative;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.front {
  background: red;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  background: blue;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
<div class="card-box">
  <div class="card">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>

Вот ссылка на jsfiddle: https://jsfiddle.net/rogybear/tfcu3qkr/3/

1 Ответ

0 голосов
/ 11 марта 2019

добавлено 

.card-box:hover .card {
      transform: rotateY(180deg);
    }


.card-box {
  width: 100px;
  height: 50px;
  position: relative;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s ease;
}

.card-box:hover .card {
  transform: rotateY(180deg);
}

.front {
  background: red;
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.back {
  background: blue;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
<div class="card-box">
  <div class="card">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>
...