问答详情
源自：3-4 编程挑战

为什么我的方块在做悬浮动画的时候就变成一张了，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 旋转     

提问者：Arrogance_J 2015-10-30 12:43

个回答

  • Y_du
    2015-10-30 16:42:57
    已采纳 

    <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在这里取到的不是你用获得的对象，所以要写到函数中来。

    0
  • qq_在道上_0
    2016-02-05 11:30:18

    你用box做场景了，一旋转的话整个场景一起旋转，js操作了box

    0