<input> CSS 转换后不可单击旋转X

Question

我试图在单击某个链接时显示输入字段，使用漂亮的转换过渡。这是一种翻转效果，类似于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);
}

任何帮助，不胜感激。

谢谢。索尼克

Answer 1

我知道

这是不久前的事了，但如果你仍然遇到这个问题，我处理了一个类似的问题。原因是父元素没有 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