為什么我的方塊在做懸浮動畫的時候就變成一張了，JS調用不到box 求大神給解答啊 謝謝
<!DOCTYPE?html>
<html>
<head>
????<title>正方體</title>
</head>
<style?type="text/css"?rel="stylesheet">
?html,?body,?div,?span,
????????h1,?h2,?h3,?h4,?h5,?h6,?p
????????a,?img,?ol,?ul,?li
????????{
????????????margin:0;padding:0;border:0;outline:0;
????????}
#bo{
?????width:400px;
?????height:400px;
?????margin:0px?auto;
?????-webkit-transform:preserve-3d;
?????transform:preserve-3d
?????-webkit-perspective:800px;
?????perspective:800px;
?????}
?????
#box{
?????width:400px;
?????height:400px;
?????background-color:#ccc;
?????margin:0px?auto;
?????position:relative;
?????-webkit-transform-style:?preserve-3d;
?????-moz-transform-style:?preserve-3d;
?????-ms-transform-style:?preserve-3d;
?????-o-transform-style:?preserve-3d;
?????transform-style:?preserve-3d;
?????
?????-webkit-perspective:800px;
?????perspective:800px;
?????-webket-perspective-origin:50%?50%;
?????perspective-origin:50%?50%;
?????
?????margin:?40px;
?????-webkit-transition:?-webkit-transform?.6s;
?????-moz-transition:?-moz-transform?.6s;
?????-ms-transition:?-ms-transform?.6s;
?????-o-transition:?-o-transform?.6s;
?????transition:?transform?.6s;
?????
?????overflow:hidden;
}
.mian{
????margin:25px;
????width:350px;
????height:350px;
????background:blue;
????position:absolute;
????
????font-size:200px;
????font-family:"microsoft?yahei";
????text-align:center;
????color:white;
}
#box1{
????width:400px;
????margin:0px?auto;
}
.bn{
????width:200px;
????margin:0px?auto;
}
#mian1{
????background-color:rgba(255,50,50,0.5);
????-webkit-transform-origin:50%?50%;
????transform-origin:50%?50%;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
}
#mian2{
????background:rgba(150,50,50,0.2);
????-webkit-transform-origin:top;
????transform-origin:top;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:rotateX(-90deg)
}
#mian3{
????background:rgba(150,150,150,0.2);
????-webkit-transform-origin:center;
????transform-origin:center;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:tranlateZ(-350px)
}
#mian4{
????background:rgba(150,0,190,0.2);
????-webkit-transform-origin:bottom;
????transform-origin:bottom;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:rotateX(90deg)
}
#mian5{
????background:rgba(50,50,150,0.2);
????-webkit-transform-origin:left;
????transform-origin:left;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:rotateY(90deg)
}
#mian6{
????background:rgba(50,150,50,0.2);
????-webkit-transform-origin:right;
????transform-origin:right;
????-webkit-transiton:-webkit-transform?1s?linear;
????transition:transform?1s?linear;
????-webkit-transform:rotateY(-90deg)
}
@keyframes?chenge{
????from?{
????????-webkit-transform:rotateX(90deg);
????}
????20%{
????????-webkit-transform:rotatey(90deg);
????}
????40%{
????????-webkit-transform:rotatez(180deg);
????}
????60%{
????????-webkit-transform:rotatey(180deg);
????}
????80%{
????????-webkit-transform:rotatez(-90deg);
????}
????to{
????????-webkit-transform:rotateX(-90deg);
????}
????}
#box:hover{
????animation:chenge?10s?ease-in-out?.5s;????
}
</style>
<script?type="text/javascript">
????function?$(id){
????????????return?document.getElementById(id);
????????}
?????var?btn;
????var?box?=?$("box");
????var?odeg?=?0;
????var?ldeg?=?0;
????function?change(btn)
????{
???????switch(btn.value)
???????{
???????????case?"up":
???????????????odeg?=?odeg?+?90;
???????????????box.style.webkitTransform:"rotateX("+odeg+"deg)";?
???????????????break;
???????????case?"down":
???????????????odeg?=?odeg?-?90;
???????????????box.style.webkitTransform:"rotateX("+odeg+"deg)";?
???????????????break;
???????????case?"left":
???????????????ldeg?=?ldeg?+?90;
???????????????box.style.webkitTransform："rotateY("+ldeg+"deg)";
???????????????break;
???????????case?"right":
???????????????ldeg?=?ldeg?-?90;
???????????????box.style.webkitTransform："rotateY("+ldeg+"deg)";
???????????????break;
???????}????
????}
????
</script>
<body>
<div?id="bo">
<div?id="box">
????<div?class="mian"?id="mian1">1</div>
????<div?class="mian"?id="mian2">2</div>
????<div?class="mian"?id="mian3">3</div>
????<div?class="mian"?id="mian4">4</div>
????<div?class="mian"?id="mian5">5</div>
????<div?class="mian"?id="mian6">6</div>
</div>
</div>
<div?id="box1">
<form?name="button"?id="form1">
?
?<div?class="bn">????
????<input?class"bn"?type="button"?name="upward"?value="up"?onclick="change(this)">
????<input?class"bn"?type="button"?name="turnleft"?value="left"?onclick="change(this)">
????<input?class"bn"?type="button"?name="turnright"?value="right"?onclick="change(this)">
????<input?class"bn"?type="button"?name="downward"?value="down"?onclick="change(this)">
?</div>
?
</form>
????
</div>
</body>
</html>求解啊 ?我想讓 box 旋轉 ? ??
2015-10-30
<script?type="text/javascript"> ????function?$(id){ ????????????return?document.getElementById(id); ????????} ?????var?btn; ???? ????var?odeg?=?0; ????var?ldeg?=?0; ????function?change(btn) ????{ ????????var?box?=?$("box"); ???????switch(btn.value) ???????{ ???????????case?"up": ???????????????odeg?=?odeg?+?90; ???????????????this.box.style.webkitTransform="rotateX("+odeg+"deg)";? ???????????????break; ???????????case?"down": ???????????????odeg?=?odeg?-?90; ???????????????box.style.webkitTransform="rotateX("+odeg+"deg)";? ???????????????break; ???????????case?"left": ???????????????ldeg?=?ldeg?+?90; ???????????????box.style.webkitTransform="rotateY("+ldeg+"deg)"; ???????????????break; ???????????case?"right": ???????????????ldeg?=?ldeg?-?90; ???????????????box.style.webkitTransform="rotateY("+ldeg+"deg)"; ???????????????break; ???????}???? ????}box.style.webkitTransform="rotateY("+ldeg+"deg)"; 這里要用=，而不是：。
box在這里取到的不是你用獲得的對象，所以要寫到函數中來。
2016-02-05
你用box做場景了，一旋轉的話整個場景一起旋轉，js操作了box