制作可点击的3D图

时间:2015-10-30 12:03:18

标签: html css css3 css-transforms

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

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

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

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

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

问题在于,显然,如果你点击一个与Firefox中的旋转图形有某种关联的链接,并且该图形几乎立即“旋转” ,{{1}触发链接状态,但链接未激活!

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

<a style='display:block'>
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;
}

1 个答案:

答案 0 :(得分: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>