css - <input>在CSS变换rotationX之后不可点击

我尝试使用一个不错的转换过渡来单击某个链接时显示一个输入字段。这是一种过渡效果，类似于iOS 6通知动画样式。

这是一个演示：http://codepen.io/anon/pen/yBzJL

基本上，我只是将输入字段放在链接上方，并首先旋转它，因此它不会出现在屏幕上。然后，当单击链接时，我向另一个方向旋转父级，以便两个子级（链接和输入）都旋转，并且只有输入字段可见。

这很好，但是问题是在转换后输入字段不可单击，我只是不知道为什么或如何解决这个问题。

以下是重要的代码部分：

的HTML

<div>
  <span class="rollover">
    <span class="rollover__front">
      <a href="#">Add a new article </a>
    </span>
    <span class="rollover__bottom">
      <input type="text" placeholder="Article number...">
    </span>
  </span>
</div>

的CSS

.rollover,
.rollover__front,
.rollover__bottom
{
  display:inline-block;
  -webkit-backface-visibility:hidden;
}

.rollover
{
  position:relative;
  -webkit-transform-style:preserve-3d;
  -webkit-transform-origin-z:-16px;
  -webkit-transition:-webkit-transform .3s ease-in-out;
}

.rollover--is-rolled
{
  -webkit-transform:rotateX(90deg);
}

.rollover__bottom
{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  -webkit-transform-origin-z:-16px;
  -webkit-transform:rotateX(-90deg);
}

任何帮助表示赞赏。

谢谢。
Xonic

最佳答案

我知道这是前一段时间，但是如果您仍然遇到此问题，我会处理类似的问题。原因是父元素没有Z厚度，因此它不认为您正在单击元素。如果要将其旋转180度，则父元素的背面就在那里，并且会产生喀哒声。为了使动画生效，您必须先将底部旋转-90度，然后单击将顶部旋转至90度，然后将底部旋转至0度。这样，父母总是可见的。

的CSS

.rollover,
.rollover__front,
.rollover__bottom
{
    -webkit-backface-visibility:hidden;
}

.rollover__front,
.rollover__bottom{
    -webkit-transition:-webkit-transform .3s ease-in-out;
}

.rollover
{
  height: 19px;
    position:relative;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin-z:0px;
}

.rollover--is-rolled .rollover__bottom{
 -webkit-transform:rotateX(0deg);
}

.rollover--is-rolled .rollover__front{
  -webkit-transform:rotateX(90deg);
}

.rollover__front{
  position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    -webkit-transform-origin-z: -10px;
}

.rollover__bottom
{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
-webkit-transform:rotateX(-90deg);
-webkit-transform-origin-z: -30px;
}

的HTML

<div>
  <div class="rollover">
    <div class="rollover__front">
      <a href="#">Add a new article </a>
    </div>
    <div class="rollover__bottom">
      <input type="text" placeholder="Article number...">
    </div>
  </div>
</div>

以及与此工作相关的链接：http://codepen.io/anon/pen/wqBsp