AI game creator

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

No:44597

←

Prev Next

→

Cubo 3d
Developer User19425｜Date and time 24/2/18 15:27:15
Build time 7.015 sec｜Game capacity 1.961KB｜

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</title>
    <style>
        #container {
            width: 200px;
            height: 200px;
            perspective: 1000px;
        }
        #cube {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: spin 5s infinite linear;
        }
        .face {
            position: absolute;
            width: 200px;
            height: 200px;
            background: url('cube_face.png');
            backface-visibility: hidden;
        }
        #front {
            transform: translateZ(100px);
        }
        #back {
            transform: rotateY(180deg) translateZ(100px);
        }
        #left {
            transform: rotateY(-90deg) translateZ(100px);
        }
        #right {
            transform: rotateY(90deg) translateZ(100px);
        }
        #top {
            transform: rotateX(90deg) translateZ(100px);
        }
        #bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
        @keyframes spin {
            100% {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="cube">
            <div class="face" id="front"></div>
            <div class="face" id="back"></div>
            <div class="face" id="left"></div>
            <div class="face" id="right"></div>
            <div class="face" id="top"></div>
            <div class="face" id="bottom"></div>
        </div>
    </div>

cube.addEventListener('click', () => {
            faces[currentFace].style.display = 'none';
            currentFace = (currentFace + 1) % faces.length;
            faces[currentFace].style.display = 'block';
        });
    </script>
</body>
</html>