Перевертывание двухсторонней карты - отображение текста с задержкой после переворачивания - PullRequest
Новая
       23

Перевертывание двухсторонней карты - отображение текста с задержкой после переворачивания

0 голосов
/ 14 января 2020

Пытаюсь сделать карточку с текстом с двух сторон. После переворачивания текст на другой стороне отображается через 0,5-1 секунду. Буду благодарен за любые решения этой проблемы. Спасибо за ваше внимание. 

<div class="tile" onmouseover="tileAnim1();" onmouseout="tileAnim10();">Karta</div>
<div class="tileBack">TEXT</div>`


    .tile{
      background-color: black;
      width: 107%;
      height: 92%;
      left: -6px;
      position: relative;
      transition: 1s;
      z-index: 100;
      color: yellow;
      filter: opacity(1);
      transform: rotateX(0deg);
      backface-visibility: hidden;
    }

    .tileBack{
      background-color: darkgray;
      width: 107%;
      height: 92%;
      left: -6px;
      position: relative;
      transition: 1s;
      z-index: 100;
      color: white;
      font-size: 36px;
      filter: opacity(1);
      transform: rotateX(-180deg);
      top: -182px;
      z-index: 0;
      backface-visibility: hidden;
    }

function tileAnim1(){
    document.getElementsByClassName("tile")[1].style.transform="rotateX(-180deg)";
    document.getElementsByClassName("tileBack")[0].style.transform="rotateX(0deg)";
}
function tileAnim10(){
    document.getElementsByClassName("tile")[1].style.transform="rotateX(0deg)";
    document.getElementsByClassName("tileBack")[0].style.transform="rotateX(-180deg)";
}
...