クリック可能な3D図形を作成する

Question

私は、ユーザがコンテナの上を移動するときにカードの反対側が表示されるCSS専用のフリップカードアニメーションを持っています：https://jsfiddle.net/qb7unks5/3/

カードの両面はクリック可能なリンクにする必要があります。理想的には、コンテナ全体がクリック可能なリンクになりますが、そのコードはFirefoxでは動作しません。 FirefoxでJSFiddle 内のリンクは決して仕事ので、あなたが実際にJSFiddleを使用してこれを見ることはできませんが、コードをオフに保存し、独立して、それを実行した場合、あなたが頻繁に、リンクはFirefoxでアクティブにするために失敗した、ということ見つけるだろう

（1）すぐにコンテナにマウスを移動し、赤いカードのテキストをクリックします。テキストが黒くなり、a:activeエフェクトがトリガーされたことを示しますが、リンクは実際にはアクティブ化されません。あなたは、カードフリップアニメーションがアクティブである間に、リンクが時々アクティブにするために失敗したグレー境コンテナの白（非赤、非青）エリアをクリックする

（2）。

これらの両方の問題は、Firefoxではなく、Chromeで発生するように見えます。また、FirefoxのJSFiddleがリンクを処理する方法のために、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

Iは、ブロックレベル<a>に:afterのpseudoを使用しています。

このようにすると、余分な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>