3D Cube Combination Time

3D Cube Combination Time

Numerical combination using 3D cubes.

Made with

Html
Css/SCSS
Javascript

Html

<div class="app">
    <cube :face="time[0]"></cube>
    <cube :face="time[1]"></cube>
    <div> : </div>
    <cube :face="time[2]"></cube>
    <cube :face="time[3]"></cube>
    <div> : </div>
    <cube :face="time[4]"></cube>
    <cube :face="time[5]"></cube>
</div>

Css

html,
.app {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: helvetica;
}
.cube {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100px;
    height: 100px;
    perspective: 10000px;
    perspective-origin: 100px 100px;
    transform-style: preserve-3d;
    transition: 0.3s;
    cursor: pointer;
    margin: 5px;

    & > .face {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 100px;
        height: 100px;

        & > .content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            font-size: 80px;
            opacity: 0;
            transition: 0.5s;
        }

        &.face-0 > .content {
            background: rgb(225, 225, 250);
            color: white;
        }
        &.face-1 > .content {
            background: rgb(200, 200, 225);
            color: white;
        }
        &.face-2 > .content {
            background: rgb(175, 175, 200);
            color: white;
        }
        &.face-3 > .content {
            background: rgb(150, 150, 175);
            color: white;
        }
        &.face-4 > .content {
            background: rgb(125, 125, 150);
            color: white;
        }
        &.face-5 > .content {
            background: rgb(100, 100, 125);
            color: white;
        }
        &.face-6 > .content {
            background: rgb(75, 75, 100);
            color: white;
        }
        &.face-7 > .content {
            background: rgb(50, 50, 75);
            color: white;
        }
        &.face-8 > .content {
            background: rgb(25, 25, 50);
            color: white;
        }
        &.face-9 > .content {
            background: rgb(0, 0, 25);
            color: white;
        }

        &.face-0,
        &.face-6 {
            transform: rotateX(0deg) translateZ(50px);
            z-index: 10;
        }
        &.face-1,
        &.face-7 {
            transform: rotateY(90deg) translateZ(50px);
            z-index: 20;
        }
        &.face-2,
        &.face-8 {
            transform: rotateX(180deg) translateZ(50px);
            z-index: 30;
        }
        &.face-3,
        &.face-9 {
            transform: rotateY(-90deg) translateZ(50px);
            z-index: 40;
        }
        &.face-4 {
            transform: rotateX(90deg) translateZ(50px);
            z-index: 50;
        }
        &.face-5 {
            transform: rotateX(-90deg) translateZ(50px);
            z-index: 60;
        }
    }

    &.show-face-0 > .face-0 > .content {
        opacity: 1;
    }
    &.show-face-1 > .face-1 > .content {
        opacity: 1;
    }
    &.show-face-2 > .face-2 > .content {
        opacity: 1;
    }
    &.show-face-3 > .face-3 > .content {
        opacity: 1;
    }
    &.show-face-4 > .face-4 > .content {
        opacity: 1;
    }
    &.show-face-5 > .face-5 > .content {
        opacity: 1;
    }
    &.show-face-6 > .face-6 > .content {
        opacity: 1;
    }
    &.show-face-7 > .face-7 > .content {
        opacity: 1;
    }
    &.show-face-8 > .face-8 > .content {
        opacity: 1;
    }
    &.show-face-9 > .face-9 > .content {
        opacity: 1;
    }

    &.show-face-0,
    &.show-face-6 {
        transform: rotateX(0deg);
    }
    &.show-face-1,
    &.show-face-7 {
        transform: rotateY(-90deg);
    }
    &.show-face-2,
    &.show-face-8 {
        transform: rotateX(180deg);
    }
    &.show-face-3,
    &.show-face-9 {
        transform: rotateY(90deg);
    }
    &.show-face-4 {
        transform: rotateX(-90deg);
    }
    &.show-face-5 {
        transform: rotateX(90deg);
    }
}

Javascript

Vue.component("cube", {
    props: ["face"],
    template: `<div class="cube" :class="'show-face-' + face" @click="nextFace">
        <div class="face face-0" :class="{show: face === 0}">
            <div class="content">0</div>
        </div>
        <div class="face face-1" :class="{show: face === 1}">
            <div class="content">1</div>
        </div>
        <div class="face face-2" :class="{show: face === 2}">
            <div class="content">2</div>
        </div>
        <div class="face face-3" :class="{show: face === 3}">
            <div class="content">3</div>
        </div>
        <div class="face face-4" :class="{show: face === 4}">
            <div class="content">4</div>
        </div>
        <div class="face face-5" :class="{show: face === 5}">
            <div class="content">5</div>
        </div>
        <div class="face face-6" :class="{show: face === 6}">
            <div class="content">6</div>
        </div>
        <div class="face face-7" :class="{show: face === 7}">
            <div class="content">7</div>
        </div>
        <div class="face face-8" :class="{show: face === 8}">
            <div class="content">8</div>
        </div>
        <div class="face face-9" :class="{show: face === 9}">
            <div class="content">9</div>
        </div>
    </div>`,
    data: {
        face: 0
    },
    methods: {
        nextFace() {
            this.face = this.face < 5 ? this.face + 1 : 0;
        }
    }
});

new Vue({
    el: ".app",
    data: {
        time: moment().format("HHmmss"),
    },
    mounted() {
        setInterval(() => {
            this.getTime();
        }, 1000);
    },
    methods: {
        getTime() {
            this.time = moment().format("HHmmss").split("");
        }
    }
});

Author

tocausan

Demo

See the Pen 3D Cube Combination Time by tocausan (@tocausan) on CodePen.