旋转三维立方体与透视错误？

时间：2015-07-16 10:40:36

标签： html css 3d

我制作了一个包含html和css的旋转立方体。

当我按下向右和向左箭头键时，立方体按照预期旋转其中心。但是，当我按下向上和向下箭头键时，它会在更大的空间内旋转。

我希望它在这种情况下围绕它的中心旋转。我已经尝试了margin: 0 auto，但这只是将多维数据集放在网页的中心。

＆＃13;
＆＃13; 
$(document).ready(function(){
    var yAngle = 0;
    var xAngle = 0;
    document.onkeydown = checkKey;
    
    function checkKey(e) {

        e = e || window.event;
 
        if (e.keyCode == '39') {
            yAngle = yAngle+5;
            $("section").css("transform",'rotateY('+yAngle+'deg)');
        }
        if (e.keyCode == '37'){
            yAngle = yAngle-5;
            $("section").css("transform",'rotateY('+yAngle+'deg)');
        }
        if (e.keyCode == '38'){
            xAngle = xAngle+5;
            $("section").css("transform","rotateX("+xAngle+"deg)");
        }
        if (e.keyCode == '40'){
            xAngle = xAngle-5;
            $("section").css("transform",'rotateX('+xAngle+'deg)');
        }
    }

    $("#button_left").click(function(){
        yAngle = yAngle-1;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
    });
   
    $("#button_right").click(function(){
        yAngle = yAngle+1;
        $("section").css("transform","rotateY("+yAngle+"deg)");
    });
    $("#button_down").click(function(){
        xAngle = xAngle-1;
        $("section").css("transform",'rotateX('+xAngle+'deg)');
    });
    $("#button_up").click(function(){
        xAngle = xAngle+1;
        $("section").css("transform","rotateX("+xAngle+"deg)");
    });
});
＆＃13; 
.buttons {
    align: center;
}
.wrap {
        perspective: 800px;
        perspective-origin: 50% 100px;
}
.cube {
    margin: 0 auto;
        position: relative;
        width: 200px;
        transform-style: preserve-3d;
}
.cube div {
        box-shadow: inset 0 0 20px rgba(125,125,125,0.9);
        position: absolute;
        width: 200px;
        height: 200px;
}
.back {
    background: rgba(40,40,40,0.8);
        transform: translateZ(-100px) rotateY(180deg);
}
.right {
    background: rgba(189,25,400,0.3);
        transform: rotateY(-270deg) translateX(100px);
        transform-origin: top right;
}
.left {
    background: rgba(189,25,400,0.3);
        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;
}
.top {
    background: rgba(189,25,400,0.3);
        transform: rotateX(-90deg) translateY(-100px);
        transform-origin: top center;
}
.bottom {
    background: rgba(189,25,400,0.3);
        transform: rotateX(90deg) translateY(100px);
        transform-origin: bottom center;
}
.front {
    background: rgba(189,25,400,0.3);
        transform: translateZ(100px);
}
＆＃13; 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body><br><br><br><br><br><br>
<div align="center" class="buttons">
<input type="button" value="<--" id="button_left">
<input type="button" value="-->" id="button_right">
<input type="button" value="down" id="button_down">
<input type="button" value="up" id="button_up">
</div>
<br><br><br><br><br><br>
<div class="wrap">
        <section class="cube">
                <div class="front"></div>
                <div class="back"></div>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
        </section>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

由于您的容器.cube没有高度，因此在您的网页中，因为所有子div都有position:absoulute;，所以它不会被其扩展子，因此其大小为200px（这是在css中指定的）x 0px，因此它会在(100px, 0px)处旋转y中心。

解决方案，给.cube一个高度，让它在中心(100px, 100px)

旋转 
.cube {
    margin: 0 auto;
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform-origin: center center;
}

＆＃13;
＆＃13; 
$(document).ready(function(){
    var yAngle = 0;
    var xAngle = 0;
        document.onkeydown = checkKey;
        function checkKey(e) {
 
    e = e || window.event;
 
    if (e.keyCode == '39') {
        yAngle = yAngle+5;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
    }
        if (e.keyCode == '37'){
            yAngle = yAngle-5;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
        }
        if (e.keyCode == '38'){
            xAngle = xAngle+5;
        $("section").css("transform","rotateX("+xAngle+"deg)");
        }
        if (e.keyCode == '40'){
            xAngle = xAngle-5;
        $("section").css("transform",'rotateX('+xAngle+'deg)');
        }
        }
    $("#button_left").click(function(){
        yAngle = yAngle-1;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
    });
   
    $("#button_right").click(function(){
        yAngle = yAngle+1;
        $("section").css("transform","rotateY("+yAngle+"deg)");
    });
        $("#button_down").click(function(){
        xAngle = xAngle-1;
        $("section").css("transform",'rotateX('+xAngle+'deg)');
    });
   
    $("#button_up").click(function(){
        xAngle = xAngle+1;
        $("section").css("transform","rotateX("+xAngle+"deg)");
    });
});
＆＃13; 
.buttons {
    align: center;
}
.wrap {
        perspective: 800px;
        perspective-origin: 50% 100px;
}
.cube {
    margin: 0 auto;
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transform-origin: center center;
}
.cube div {
        box-shadow: inset 0 0 20px rgba(125,125,125,0.9);
        position: absolute;
        width: 200px;
        height: 200px;
}
.back {
    background: rgba(40,40,40,0.8);
        transform: translateZ(-100px) rotateY(180deg);
}
.right {
    background: rgba(189,25,400,0.3);
        transform: rotateY(-270deg) translateX(100px);
        transform-origin: top right;
}
.left {
    background: rgba(189,25,400,0.3);
        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;
}
.top {
    background: rgba(189,25,400,0.3);
        transform: rotateX(-90deg) translateY(-100px);
        transform-origin: top center;
}
.bottom {
    background: rgba(189,25,400,0.3);
        transform: rotateX(90deg) translateY(100px);
        transform-origin: bottom center;
}
.front {
    background: rgba(189,25,400,0.3);
        transform: translateZ(100px);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<body><br><br><br><br><br><br>
<div align="center" class="buttons">
<input type="button" value="<--" id="button_left">
<input type="button" value="-->" id="button_right">
<input type="button" value="down" id="button_down">
<input type="button" value="up" id="button_up">
</div>
<br><br><br><br><br><br>
<div class="wrap">
        <section class="cube">
                <div class="front"></div>
                <div class="back"></div>
                <div class="top"></div>
                <div class="bottom"></div>
                <div class="left"></div>
                <div class="right"></div>
        </section>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试使用相同的数量配置所有转换。在第一部分中，您使用xAngle +/- 5，在第二部分中使用xAngle +/- 1。我认为由于某种原因它会找到y轴的事件名称，但它正在处理x轴的关键代码，因为它们使用的是步骤5，你会看到更大的增量/减量。

相关问题
最新问题