javascript - 设置3D动画之后表单和链接都不能点了
本文介绍了javascript - 设置3D动画之后表单和链接都不能点了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<style>
*{
margin: 0;
padding: 0;
border: none;
}
.load_button{
position: absolute;
top: 200px;
right: 70px;
display: inline-block;
width: 50px;
height: 50px;
background-color: rgba(0,0,0,0.6);
line-height: 50px;
text-align: center;
color: white;
font-size: 15px;
font-family: "微软雅黑";
}
.box{
position: relative;
width: 370px;
height: 480px;
margin: 200px auto;
z-index: 2;
border: 1px solid black;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-perspective: 900;
}
.move_box{
position: absolute;
top: 49px;
left: -1px;
border: 1px solid black;
width: 370px;
height: 430px;
backface-visibility: hidden;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateY(0deg);
z-index: 10000;
}
ul{
list-style: none;
position: absolute;
overflow: hidden;
width: 370px;
height: 50px;
top: -1px;
left: -1px;
border: 1px solid black;
z-index: 3;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.select{
float: left;
width: 185px;
height: 50px;
background-color: white;
color: black;
line-height: 50px;
font-size: 20px;
text-align: center;
font-family: "微软雅黑";
z-index: 5;
cursor:pointer;
}
.not_select{
float: left;
width: 185px;
height: 50px;
background-color: rgb(228,228,228);
color: rgb(153,153,153);
line-height: 50px;
font-size: 20px;
text-align: center;
font-family: "微软雅黑";
z-index: 5;
cursor:pointer;
}
#move_bar{
position: absolute;
left: 0px;
top: 41px;
width: 186px;
height: 10px;
z-index: 10;
background-color: blue;
}
#load{
position: absolute;
top: -1px;
left: -1px;
border: 1px solid black;
width: 370px;
height: 430px;
background-color: white;
backface-visibility: hidden;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
#load img{
position: absolute;
left: 100px;
top: 30px;
width: 160px;
height: 160px;
}
#load p{
position: absolute;
left: 20px;
top: 230px;
font-size: 18px;
font-family: "微软雅黑";
}
#load_name{
position: absolute;
top: 225px;
left: 90px;
width: 232px;
height: 35px;
border: 1px solid black;
font-size: 20px;
line-height: 35px;
padding: 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
#load span{
position: absolute;
left: 20px;
top: 290px;
font-size: 18px;
font-family: "微软雅黑";
}
#load_password{
position: absolute;
top: 285px;
left: 90px;
width: 232px;
height: 35px;
border: 1px solid black;
font-size: 30px;
line-height: 35px;
padding: 0 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
#load_sub{
position: absolute;
top: 355px;
left: 135px;
width: 100px;
height: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
border: 1px solid black;
text-shadow: 2px 2px 2px white;
font-size: 15px;
}
.sign{
transform: rotateY(180deg);
position: absolute;
top: -1px;
left: -1px;
border: 1px solid black;
width: 370px;
height: 430px;
z-index: 10;
background-color: white;
backface-visibility: hidden;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
h1{
position: absolute;
left: 20px;
top: 37px;
font-size: 18px;
font-family: "微软雅黑";
}
h2{
position: absolute;
left: 20px;
top: 102px;
font-size: 18px;
font-family: "微软雅黑";
}
h3{
position: absolute;
left: 20px;
top: 170px;
font-size: 18px;
font-family: "微软雅黑";
}
h4{
position: absolute;
left: 20px;
top: 236px;
font-size: 18px;
font-family: "微软雅黑";
}
h5{
position: absolute;
left: 20px;
top: 304px;
font-size: 18px;
font-family: "微软雅黑";
}
.sign input{
width: 242px;
height: 35px;
margin: 30.5px 0 0 105px;
border: 1px solid black;
z-index: 10;
}
.sign form input{
position: absolute;
margin: 0;
top: 350px;
left: 62px;
height: 15px;
width: 15px;
}
.sign span{
position: absolute;
left: 79px;
top: 350px;
font-size: 13px;
}
#agree{
position: absolute;
left: 50px;
top: 350px;
width: 15px;
height: 15px;
}
#sign_sub{
position: absolute;
top: 380px;
left: 135px;
margin: 0 !important;
width: 100px !important;
height: 30px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
border: 1px solid black;
text-shadow: 2px 2px 2px white;
font-size: 15px;
}
.signnew{
position: absolute;
top: 49px;
left: -1px;
border: 1px solid black;
width: 370px;
height: 430px;
z-index: 15;
background-color: white;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.signnew input{
width: 242px;
height: 35px;
margin: 30.5px 0 0 105px;
border: 1px solid black;
z-index: 15;
}
.signnew form input{
position: absolute;
margin: 0;
top: 350px;
left: 62px;
height: 15px;
width: 15px;
}
.signnew span{
position: absolute;
left: 79px;
top: 350px;
font-size: 13px;
}
#agree{
position: absolute;
left: 50px;
top: 350px;
width: 15px;
height: 15px;
z-index: 15;
}
#sign_sub{
position: absolute;
top: 380px;
left: 135px;
margin: 0 !important;
width: 100px !important;
height: 30px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, #F2F2F2, #A7A7A7); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F2F2F2), color-stop(1, #A7A7A7)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F2F2F2', endColorstr='#A7A7A7', GradientType='0'); /* IE*/
border: 1px solid black;
text-shadow: 2px 2px 2px white;
font-size: 15px;
z-index: 15;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById('box');
var move_box = document.getElementById('move_box')
var load_but = document.getElementById('select');
var sign_but = document.getElementById('not_select');
var degnum = 0;
var move_bar = document.getElementById('move_bar');
var sign = document.getElementById('sign');
var sign2 = document.getElementById('sign2');
var timer = null;
load_but.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
if(degnum>0){
degnum -= 2;
move_box.style['transform'] = 'rotateY(' + degnum + 'deg)';
}
else{
clearInterval(timer);
}
},1)
var timebar = null;
timebar = setTimeout(function(){
bar_move(0);
},100)
//box.remove(sign2);
}
sign_but.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
if(degnum<180){
degnum += 2;
move_box.style['transform'] = 'rotateY(' + degnum + 'deg)';
}
else{
clearInterval(timer);
}
},1)
var timebar = null;
timebar = setTimeout(function(){
bar_move(185);
},100)
var t = null;
t = setTimeout(function(){
signnew = sign.cloneNode(true);
signnew.className = "signnew";
var sign2 = box.appendChild(signnew);
},300)
//sign2.innerHTML = sign.innerHTML;
}
}
var timemovebar = null;
clearInterval(timemovebar);
function bar_move(target){
if(move_bar.offsetLeft==target){
clearInterval(timemovebar);
}else{
timemoverbar = setInterval(function(){
var speed = (target - move_bar.offsetLeft)/10;
speed = speed<0?Math.floor(speed):Math.ceil(speed);
move_bar.style['left']=move_bar.offsetLeft+speed+'px';
},10)
}
}
</script>
</head>
<body>
<p class="load_button" id="load_button">登录</p>
<div class="box" id="box">
<ul>
<li class="select" id="select" >登录</li>
<li class="not_select" id="not_select">注册</li>
</ul>
<div id="move_bar"></div>
<div class="move_box" id="move_box">
<div id="load" >
<img src="img/雷途最新LOGO200_200.png"/>
<p>用户名</p>
<input type="text" value="" name="load_name" id="load_name"/>
<span>密 码</span>
<input type="password" value="" name="load_password" id="load_password"/>
<input type="submit" name="load_sub" id="load_sub" value="登录" />
</div>
<div id="sign" class="sign">
<h1>用 户 名</h1>
<input type="text" value="" name="sign_name" />
<h2>电话号码</h2>
<input type="tel" value="" name="phone" />
<h3>e - mail</h3>
<input type="email" value="" name="mail" />
<h4>登录密码</h4>
<input type="password" value="" name="sign_password" />
<h5>确认密码</h5>
<input type="password" value="" name="do_password" />
<form>
<input type="radio" name="agree" id="agree" value="" />
</form>
<span>确认已阅读<a href="#">《雷途网相关规定》</a>并同意</span>
<input type="submit" name="sign_sub" id="sign_sub" value="注册" />
</div>
</div>
</div>
</body>
</html>解决方案
因为你登录页实际上还是覆盖在注册页之上的，只不过设置了backface-visibility:hidden隐藏了你看不到而已。
推荐的做法是两个一起旋转，初始注册页是180deg的，旋转回来后就回到正面啦。因为transform会影响元素的z-index。具体怎么影响可以自行搜索，跟stacking context有关。
这篇关于javascript - 设置3D动画之后表单和链接都不能点了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
