在 Z 轴上平移表单/输入答案

【问题标题】：Translating a form/input on the Z-axis在 Z 轴上平移表单/输入
【发布时间】：2017-11-17 21:44:20
【问题描述】：

在 Z 轴上平移表单/输入时，接受光标的区域不会在 Z 空间中与元素的明显位置一起前移，并且尝试单击输入框不起作用，除非如果它没有被翻译，你点击元素将是的位置。有没有办法解决这个问题？

HTML

<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/client-questionaire.css" type="text/css">

<div id="impress" data-transition-duration="3000">

    <div id="yourself" class="step page" data-x="0">
            <div class="innerDiv">
                <p class="mainWord">
                    <span class="textLength">
                        <span class="black">YOUR</span><span class="white">SELF</span>
                    </span>
                </p>
                <div class="wrap">
                    <div class="formBox">
                        <form id="yourselfForm" class="form">

                            <label for="firstName">
                                What's your <u>first name</u>?
                            </label><br>
                            <input name="firstName" type="text" ><br>

                            <label for="lastName">
                                What's your <u>last name</u>?
                            </label><br>
                            <input name="lastName" type="text" ><br>

                            <label for="currentJob">
                                What's your <u>current job title</u>?
                            </label><br>
                            <input name="currentJob" type="text" ><br>

                        </form>
                    </div>
                </div>
            </div> 
    </div>
   <div id="intro" class="step page" data-x="2000">
        <div class="outerDiv">
            <div class="innerDiv">
                <p class="mainWord"><span class="black first">CREÆTIVE</span> <span class="white last">BRIEF</span></p>

                <div class="formBox">
                </div>
             </div>
        </div> 
    </div>
    <div id="lookFeel" class="step page" data-x="4000">
        <div class="outerDiv">
            <div class="innerDiv">
                <p class="mainWord"><span class="black firstSpan">LOOK</span> <span class="white secondSpan">&</span><span class="black"> FEEL</span></p>

                <div class="formBox">
                </div>
             </div>
        </div>   
    </div>
<script src="/js/impress.js"></script>
<script>
impress().init();
</script>

CSS

body {
    background: #cc9933;
}

.page {
    height: 830px;
    width: 1480px;
    margin: 0px;
}



.formBox {
    position:absolute;
    border: 1px solid black;
    height: 450px;
    width: 270px;
    top: -150px;
    left: 867px;
    z-index: 21;
    background: #cc9933;
    transform: translateZ(300px);
}



.innerDiv {
    position:absolute;
    z-index: 9;
    width: 1000%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    top:40%;
    height: 108px;
}

.frontFiller {
    transform: translateX(-2000px);
    width: 1000%;
}

.mainWord {
    margin: 0px 50px;
    font-size: 90px;
    height: 100%;
}

.black {
    color: black;
}

.white {
    color: white;
}

【问题讨论】：

您是否有机会制作一个重现该错误的 JSFiddle 或 CodePen 示例？使用您提供的 CSS 我无法重现它。
我试图回答，但我不确定我是否正确。你的例子不太清楚。你能提供一个minimal reproducible example吗？这意味着将所有对显示您想要实现的目标不重要的内容都删除，但将所有对重现错误实际必要的内容都保留在其中...并阅读我链接的文章，这真的很有帮助。
我注意到您编辑了您的问题以包含更多代码。我仍然无法重现该错误，而且我对您为什么要使用 translateZ 感到困惑。它在这个布局中的目的是什么？
我正在使用 impress.js 制作幻灯片之间的动画，我让 div 弹出，因此它在幻灯片之间转换时会在页面上滑动

标签： html css forms input

【解决方案1】：

不确定您要实现什么，您的示例将 input 移到视口之外，并且翻译根本不起作用。

那么，我来猜一猜：你有没有试过在.formBox的父级上设置CSS属性perspective？

这里有一个例子来说明它是如何工作的：

.wrapper {
    perspective: 50px;
    transform-style:preserve-3d;
}
.formBox {
    position:absolute;
    border: 1px solid black;
    height: 450px;
    width: 270px;
    left: 200px;
    z-index: 21;
    background: #cc9933;
    -webkit-transform: translateZ(30px);   
    transform: translateZ(30px);
}

<div class="wrapper">
<div class="formBox">
    <form id="yourselfForm" class="form">
        <label for="firstName">
        What's your <u>first name</u>?
        </label><br>
        <input name="firstName" type="text" >
    </form>
</div>
</div>

【讨论】：

【解决方案2】：

这是一个浏览器错误，特别是 Chrome 错误。我可以重现您在 Google Chrome 上提供的 HTML 和 CSS 的效果。在 Firefox (Quantum) 上，它按预期工作。

在 Chrome 上，只有同时使用 translateZ() 和 z-index 时才会发生这种情况。如果您可以在不使用文本字段的 z-index 的情况下创建表单，那应该没问题。

考虑将此报告给Google Chrome but tracker。

【讨论】：