<div class="stage">
    <!-- month -->
    <div class="group g1">
        <div class="dice d1">
            <div class="face num-0"></div>
            <div class="face num-1"></div>
            <div class="face num-2"></div>
            <div class="face num-4"></div>
            <div class="face num-6"></div>            
            <div class="face num-8"></div>
        </div>
        <div class="dice d2">
            <div class="face num-0"></div>
            <div class="face num-1"></div>
            <div class="face num-2"></div>
            <div class="face num-3"></div>
            <div class="face num-5"></div>
            <div class="face num-7"></div>
        </div>   
    </div>
    <!-- date -->
    <div class="group g2">
        <div class="dice d3">
            <div class="face num-0"></div>
            <div class="face num-1"></div>
            <div class="face num-2"></div>
            <div class="face num-4"></div>
            <div class="face num-6"></div>             
            <div class="face num-8"></div>
        </div>
        <div class="dice d4">
            <div class="face num-0"></div>
            <div class="face num-1"></div>
            <div class="face num-2"></div>
            <div class="face num-3"></div>
            <div class="face num-5"></div>
            <div class="face num-7"></div>
        </div>   
    </div>
    <time></time>
</div>




html { box-sizing: border-box; } *,*::before,*::after { box-sizing: inherit; position: relative; }
body { margin: 0; background-color: whitesmoke; }


.stage{
    height: 100vh;
    perspective: 1000px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    @media (max-width:480px){
        transform: scale(0.8)
    }
}
time {
    position: absolute;
    left: 50%; 
    transform: translate(-50%, 110px);
    color: #666;
    font-size: 0.8em;
    
}

.group {
    transform-style: preserve-3d;
    transition: 1000ms;

    //  groups
    &.g1 { left: 110px; z-index: 1 }
    &.g2 { left: -110px; z-index: 2 }    

    //  dice
    .d1,.d3 { left: -55px }
    .d2,.d4 { left: 55px; }   
    
}
.dice {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform-style: preserve-3d;

    text-align: center;
    font-size: 45px; 
    line-height: 2;

    transition: 1000ms;    
    
    .face { 
        $edge: 90px;        
    
        position: absolute;
        margin: -0.5 * $edge;
        width: $edge; 
        height: $edge;
        outline: 1px solid transparent;

        &:nth-child(1) { transform: rotateY(  0deg) translateZ(0.5 * $edge); }
        &:nth-child(2) { transform: rotateY( 90deg) translateZ(0.5 * $edge); }
        &:nth-child(3) { transform: rotateY(180deg) translateZ(0.5 * $edge); }
        &:nth-child(4) { transform: rotateY(270deg) translateZ(0.5 * $edge); }
        &:nth-child(5) { transform: rotateX( 90deg) translateZ(0.5 * $edge); }
        &:nth-child(6) { transform: rotateX(-90deg) translateZ(0.5 * $edge);}
        
        opacity: 0.9;
        &:after {
            position: absolute;            
            top: 0;
            left: 0;
            content:'';
            display: block;
            width: 0;
            height: 0;
        }
    }
    &.d1 .face, &.d2 .face { background-image: linear-gradient(-45deg, tomato, red); }
    &.d3 .face, &.d4 .face { background-image: linear-gradient(-45deg, yellowgreen, olive); }    
}






//  numbers 
.num-0:after {
    $color: rgba(#fff, 0.8);
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        25px 25px 0 5px $color,                
        65px 25px 0 5px $color,                        
        25px 35px 0 5px $color,                
        65px 35px 0 5px $color,                        
        25px 45px 0 5px $color,                
        65px 45px 0 5px $color,                        
        25px 55px 0 5px $color,                
        65px 55px 0 5px $color,                        
        25px 65px 0 5px $color,                
        65px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                    
}

.num-1:after {
    $color: rgba(#fff, 0.8);
    box-shadow: 
        45px 15px 0 5px $color,            
        45px 25px 0 5px $color,            
        45px 35px 0 5px $color,            
        45px 45px 0 5px $color,            
        45px 55px 0 5px $color,            
        45px 65px 0 5px $color,            
        45px 75px 0 5px $color
}

.num-2:after {
    $color: rgba(#fff, 0.8);    
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        65px 25px 0 5px $color,                        
        65px 35px 0 5px $color,                        
        25px 45px 0 5px $color, 
        35px 45px 0 5px $color,                
        45px 45px 0 5px $color,            
        55px 45px 0 5px $color, 
        65px 45px 0 5px $color,                        
        25px 55px 0 5px $color,                
        25px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                    
}

.num-3:after {
    $color: rgba(#fff, 0.8);    
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        65px 25px 0 5px $color,                        
        65px 35px 0 5px $color, 
        35px 45px 0 5px $color,         
        45px 45px 0 5px $color,                
        55px 45px 0 5px $color,                
        65px 45px 0 5px $color,                        
        65px 55px 0 5px $color,                        
        65px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                    
}
.num-4:after {
    $color: rgba(#fff, 0.8);    
    box-shadow: 
        25px 15px 0 5px $color,         
        65px 15px 0 5px $color,         
        25px 25px 0 5px $color,                
        65px 25px 0 5px $color,                        
        25px 35px 0 5px $color,                
        65px 35px 0 5px $color,                        
        25px 45px 0 5px $color,                
        35px 45px 0 5px $color, 
        45px 45px 0 5px $color,         
        55px 45px 0 5px $color,                 
        65px 45px 0 5px $color,                        
        65px 55px 0 5px $color,                        
        65px 65px 0 5px $color,                
        65px 75px 0 5px $color,                    
}


.num-5:after {
    $color: rgba(#fff, 0.8);    
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        25px 25px 0 5px $color,                        
        25px 35px 0 5px $color,                        
        25px 45px 0 5px $color, 
        35px 45px 0 5px $color,                
        45px 45px 0 5px $color,            
        55px 45px 0 5px $color, 
        65px 45px 0 5px $color,                        
        65px 55px 0 5px $color,                
        65px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                    
}

//  also acts as 9
.num-6:after {
    $color: rgba(#fff, 0.8);    
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        25px 25px 0 5px $color,                
        25px 35px 0 5px $color,                
        25px 45px 0 5px $color,  
        35px 45px 0 5px $color,          
        45px 45px 0 5px $color,                  
        55px 45px 0 5px $color,                  
        65px 45px 0 5px $color,                        
        25px 55px 0 5px $color,                
        65px 55px 0 5px $color,                        
        25px 65px 0 5px $color,                
        65px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                 
}

.num-7:after {
    $color: rgba(#fff, 0.8);  
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        65px 25px 0 5px $color,                        
        65px 35px 0 5px $color,                        
        65px 45px 0 5px $color,  
        65px 55px 0 5px $color,                        
        65px 65px 0 5px $color,                
        65px 75px 0 5px $color,                    
}

.num-8:after {
    $color: rgba(#fff, 0.8);  
    box-shadow: 
        25px 15px 0 5px $color,         
        35px 15px 0 5px $color,                
        45px 15px 0 5px $color,            
        55px 15px 0 5px $color, 
        65px 15px 0 5px $color,         
        25px 25px 0 5px $color,                
        65px 25px 0 5px $color,                        
        25px 35px 0 5px $color,                
        65px 35px 0 5px $color,                        
        25px 45px 0 5px $color,                
        35px 45px 0 5px $color,                
        45px 45px 0 5px $color,            
        55px 45px 0 5px $color, 
        65px 45px 0 5px $color,  
        25px 55px 0 5px $color,                
        65px 55px 0 5px $color,                        
        25px 65px 0 5px $color,                
        65px 65px 0 5px $color,                
        25px 75px 0 5px $color,            
        35px 75px 0 5px $color,                
        45px 75px 0 5px $color,            
        55px 75px 0 5px $color,            
        65px 75px 0 5px $color,                    
}
View Compiled

const g1 = document.querySelector('.g1');
const g2 = document.querySelector('.g2');
const d1 = document.querySelector('.d1');
const d2 = document.querySelector('.d2');
const d3 = document.querySelector('.d3');
const d4 = document.querySelector('.d4');
const time = document.querySelector('time');

const rotation = [
    { x:   0, y:   0 }, // 0
    { x:   0, y: 270 }, // 1
    { x:   0, y: 180 }, // 2    
    { x:   0, y:  90 }, // 3        
    { x:   0, y:  90 }, // 4
    { x: 270, y:   0 }, // 5
    { x:  90, y:   0 }, // 6        
    { x:  90, y:   0 }, // 7    
    { x: 270, y:   0 }, // 8   
    { x:  90, y: 180 }  // 9   
]


let count = 0;

setInterval(()=>{
    //  current date + increment
    const now = new Date();
    now.setDate(now.getDate() + count);
    const month = now.getMonth() + 1;
    const date  = now.getDate();    
     
    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    time.textContent = now.toLocaleDateString('en', options);
    
    count++;
    
    
    //  face values
    const n1 = month < 10 ? 0 : (month - month % 10)/10 ;
    const n2 = month < 10 ? month : month % 10;    
    const n3 = date < 10 ? 0 : (date - date % 10)/10;
    const n4 = date < 10 ? date : date % 10;    
    
    //  console.log(n1, n2, n3, n4)    
    
    //  flip dice 
    const flip1 = n2 % 2 === 0 || n2 === 9 || n1 === 3;
    const flip2 = n4 % 2 === 0 || n4 === 9 || n3 === 3;          
    
    
    //  rotation 
    let r1, r2, r3, r4;
    
    if(flip1){
        g1.style.transform = `rotateY(180deg) rotateX(-30deg)`;            
        r1 = rotation[n2];
        r2 = rotation[n1];        
    } else {
        g1.style.transform = `rotateX(30deg)`;            
        r1 = rotation[n1];
        r2 = rotation[n2];        
    }
    
    if(flip2){
        g2.style.transform = `rotateY(180deg) rotateX(-30deg)`;            
        r3 = rotation[n4];
        r4 = rotation[n3];        
    } else {
        g2.style.transform = `rotateX(30deg)`;            
        r3 = rotation[n3];
        r4 = rotation[n4];        
    }    
    
    d1.style.transform = `rotateX(${r1.x}deg) rotateY(${r1.y}deg) rotateY(${flip1?-180:0}deg)`;
    d2.style.transform = `rotateX(${r2.x}deg) rotateY(${r2.y}deg) rotateY(${flip1?-180:0}deg)`;
    d3.style.transform = `rotateX(${r3.x}deg) rotateY(${r3.y}deg) rotateY(${flip2?-180:0}deg)`;
    d4.style.transform = `rotateX(${r4.x}deg) rotateY(${r4.y}deg) rotateY(${flip2?-180:0}deg)`;    
    
    
},2000);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.