制作可点击的3D图

Question

我有一个仅限CSS的翻转卡片动画,当用户将鼠标悬停在容器上时,会显示卡片的另一面:https://jsfiddle.net/qb7unks5/3/.

卡的两侧应该是可点击的链接.理想情况下,整个容器都是可点击的链接,但我的代码在Firefox中不起作用.因为JSFiddle中的链接永远不能在Firefox中工作,所以你实际上无法通过使用JSFiddle看到这一点,但是如果你要保存代码并独立运行它,你会发现,通常情况下,链接无法在Firefox下激活情况:

(1)当您快速将鼠标移动到容器中并单击红色卡片的文本时.文本变黑,表示a:active已触发效果,但实际上未激活链接.

(2)当卡片翻转动画处于活动状态时,单击灰色边框容器的白色(非红色,非蓝色)区域时,链接有时无法激活.

这两个问题似乎只发生在Firefox中,而不是Chrome.而且,由于Firefox中的JSFiddle如何处理链接,你无法通过使用JSFiddle链接来说明.

问题是,显然,如果你点击一个与Firefox中的旋转图形有某种关联的链接,并且该图形几乎立即 "旋转" ,a:active则会触发链接状态,但链接不会被激活!

所以,我假设我必须创建一个<a style='display:block'>容器大小和形状相同的块,使其z-index高于数字,并且通过这样做,基本上使整个区域容器可通过与图不直接相关的链接进行点击.有没有更好的解决方案？

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;
    	    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;
    	    backface-visibility: hidden;
}
	
.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

我在块级使用了pseudoof 。:after<a>

这将消除对额外 HTML 标记的需要，同时实现所需的结果。

伪值绝对 100% 放置到相对父级，这样即使父级发生变化，它也会覆盖父级的大小。

CODEPEN示例

注意：使用此解决方案，您的原始内容<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;
}

超文本标记语言

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