旋转具有透视错误的 3d 立方体？

Question

我用 html 和 css 制作了一个旋转立方体。

当我按向右和向左箭头键时，立方体会按预期围绕其中心旋转。但是，当我按下向上和向下箭头键时，它会以更大的 space 旋转。

在这种情况下，我也希望它绕其中心旋转。如您所见，我已经尝试过 margin: 0 auto 但这只会将立方体定位在网页的中心。

$(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)");
    });
});

.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);
}

 <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>

Answer 1

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

Answer 2

因为你的容器.cube没有高度，所以在你的页面中，因为所有childdiv都有position:absoulute;所以不会展开根据它的 child，所以它的大小是 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;
}

$(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)");
    });
});

.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);
}

<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>

旋转具有透视错误的 3d 立方体？

Rotating 3d cube with perspective error?

html

css

3d