Question

我正在尝试在单击某个链接时显示输入字段，使用一个很好的转换过渡。这是一种翻转效果，类似于iOS 6通知动画风格。

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

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

以下是重要的代码部分：

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

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

CSS转换rotateX后，<input />无法点击

1 个答案: