CODEWITHSUNDEEP
htmlcss3d
RaviTej310
RaviTej310

Reputation: 1715

Rotating 3d cube with perspective error?

I have made a rotating cube with html and css.

When I press the right and left arrow keys, the cube rotates around its center as it is supposed to. However, when I press the up and down arrow keys, it rotates in a far larger space.

I want it to rotate about its center in this case too. I have already tried margin: 0 auto as you can see but this only positions thee cube in the center of the webpage.

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

Upvotes: 2

Views: 116

Answers (2)

fuyushimoya
fuyushimoya

Reputation: 9813

Because your container .cube doesn't have a height, so in your page, as all child div all have position:absoulute; it won't be expanded by its child, so its size is 200px (this is assigned in css) x 0px, so it'll rotate y center at (100px, 0px).

Solution, give .cube a height, so it'll rotate at center (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>

Upvotes: 1

prmottajr
prmottajr

Reputation: 1824

Try to configure all the transformations with the same amount. In the first section you use xAngle+/-5 and in the second section you use xAngle+/-1. I think that for some reason it is finding the event names for the y axis but it is processing the key codes for x axis, since these are using a step 5 you would see a larger increment/decrement.

Upvotes: 0

Related Questions