在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移动到了视口之外，并且转换完全无效。
因此，我会猜测：您是否尝试在perspective的父级上设置CSS属性.formBox？
这是显示其工作方式的示例：
.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>关于html - 在Z轴上平移表单/输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47359739/