Создание интерактивной трехмерной фигуры

Question

У меня есть анимация флип-карт только с CSS, когда другая сторона карты отображается, когда пользователь наводил курсор на контейнер: https://jsfiddle.net/qb7unks5/3/.

Обе стороны карты должны быть доступны по ссылке. В идеале, весь контейнер будет кликабельной ссылкой, но код, который у меня для этого, не работает в Firefox. Поскольку ссылки в JSFiddle никогда не работают, вы фактически не можете увидеть это с помощью JSFiddle, но если вы должны были сэкономить код и запустить его самостоятельно, вы обнаружите, что часто ссылка не активируется в Firefox при двух обстоятельствах:

(1) Когда вы быстро перемещаете мышь в контейнер и нажимаете на текст красной карточки. Текст становится черным, что указывает на срабатывание эффекта a:active, но ссылка фактически не активирована.

(2) Когда вы нажимаете на белую (не красную, несину) область контейнера с серой границей, когда анимация флип-карты активна, ссылка иногда не активируется.

Обе эти проблемы возникают только в Firefox, а не в Chrome. И снова, из-за того, как JSFiddle в Firefox обрабатывает ссылки, вы не можете сказать, используя ссылку JSFiddle.

Проблема заключается в том, что, судя по всему, если вы нажмете на ссылку, которая каким-то образом связанный с вращающейся фигуры в Firefox, и эта цифра «поворачивается в сторону» почти сразу же после этого, то a:active состояние линии срабатывает, но ссылка не активирована!

Итак, я предполагаю, что мне нужно будет создать блок <a style='display:block'> того же размера и формы контейнера, сделать его z-индекс выше, чем у фигур, и, сделав это, по существу сделать область всего контейнера можно кликать по ссылке, не связанной напрямую с цифрами. Есть ли лучшее решение?

figure { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    border: 1px solid #CCC; 
 
    -webkit-perspective: 800px; 
 
     -moz-perspective: 800px; 
 
     -o-perspective: 800px; 
 
    \t  perspective: 800px; 
 
    } 
 

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

 
.container:hover .card { 
 
    -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
      transform: rotateY(180deg); 
 
} 
 

 
.card figure { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 260px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    font-size: 30px; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
     -moz-backface-visibility: hidden; 
 
     -o-backface-visibility: hidden; 
 
    \t  backface-visibility: hidden; 
 
} 
 
\t 
 
.card .front { 
 
    background: red; 
 
} 
 

 
.card .back { 
 
    background: blue; 
 
    -webkit-transform: rotateY(180deg); 
 
     -moz-transform: rotateY(180deg); 
 
     -o-transform: rotateY(180deg); 
 
      transform: rotateY(180deg); 
 
} 
 

 
a { 
 
    color: white; 
 
} 
 

 
a:active { 
 
    color: black; 
 
}

<a href="http://google.com"> 
 
    <div class="container"> 
 
     <div class="card"> 
 
      <figure class="front">Some test text</figure> 
 
      <figure class="back">More text</figure> 
 
     </div> 
 
    </div> 
 
</a>

Answer 1

Я использовал pseudo из :after на уровне блоков <a>.

Это позволит исключить необходимость дополнительной разметки HTML при достижении желаемого результата.

Псевдоопределение абсолютного 100% относительного родителя, так что оно будет охватывать размер родителя, даже если это изменится.

CODEPEN example

Примечание: что оригинал <div class="container"> можно было бы объединить в самой <a> тег с этим раствором.

CSS

a.container { 
    color: white; 
    position: relative; 
    display: block; 
    width: 200px; 
    height: 260px; 
    position: relative; 
    margin: 0 auto 40px; 
    border: 1px solid #CCC; 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
    -o-perspective: 800px; 
     perspective: 800px; 
} 

a.container:after { 
    content: ''; 
    display:block; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    position: absolute; 
    top: 0; 
} 

HTML

<a class="container" href="http://google.com"> 
    <div class="card"> 
    <figure class="front">Some test text</figure> 
    <figure class="back">More text</figure> 
    </div> 
</a>