在 Z 轴上转换表单/输入

在 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;
}

不确定您要实现的目标，您的示例将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>

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

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

考虑将此报告给谷歌浏览器但跟踪器。

相关内容

最新更新

热门标签：