A 3d cube the can be moved's game

Click here for free DL of the app version that can save data.

No:46725

←

Prev Next

→

A 3d cube the can be moved
Developer User20131｜Date and time 24/2/25 21:28:50
Build time 6.984 sec｜Game capacity 1.989KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<title>Cubo 3D Game</title>
<style>
    #container {
        width: 200px;
        height: 200px;
        position: relative;
        perspective: 1000px;
    }

#cube {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        transition: transform 1s;
    }

.face {
        position: absolute;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
        font-size: 40px;
        color: white;
        background-color: blue;
        border: 1px solid black;
    }

.face:nth-child(1) { transform: rotateY(0deg) translateZ(100px); }
    .face:nth-child(2) { transform: rotateY(90deg) translateZ(100px); }
    .face:nth-child(3) { transform: rotateY(180deg) translateZ(100px); }
    .face:nth-child(4) { transform: rotateY(-90deg) translateZ(100px); }
    .face:nth-child(5) { transform: rotateX(90deg) translateZ(100px); }
    .face:nth-child(6) { transform: rotateX(-90deg) translateZ(100px); }
</style>
</head>
<body>
    <div id="container">
        <div id="cube">
            <div class="face">1</div>
            <div class="face">2</div>
            <div class="face">3</div>
            <div class="face">4</div>
            <div class="face">5</div>
            <div class="face">6</div>
        </div>
    </div>

var startX = 0;
        var startY = 0;

cube.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        });

cube.addEventListener('touchmove', function(e) {
            var diffX = e.touches[0].clientX - startX;
            var diffY = e.touches[0].clientY - startY;

cube.style.transform = 'rotateX(' + (diffY/5) + 'deg) rotateY(' + (-diffX/5) + 'deg)';

e.preventDefault();
        });
    </script>
</body>
</html>