Question

在Z轴上平移表格/输入时，接受光标的区域不会在Z空间中带有元素的明显位置，并且尝试点击输入框并不会＃39 ; t除非单击元素，否则它将被翻译。有什么方法可以解决这个问题吗？

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

Answer 1

不确定您要尝试实现的目标，您的示例会将input移到视口之外，并且翻译根本无法正常工作。

所以，我猜测一下：您是否尝试在perspective的父级设置CSS属性.formBox？

以下是展示其运作方式的示例：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

在Z轴上平移表格/输入

2 个答案: