CodePen Embed - Keyboard - Type something

div.main.flex#m
    div.keyboard.flex#k
        div.screen.flex#s
        div.keyboard__front.face
        div.keyboard__back.face
        div.keyboard__right.face
        div.keyboard__left.face
        div.keyboard__top.face
            //----------------------
            div.keys
                div.key.flex
                    div.key__front.face.face--key-b3
                    div.key__back.face.face--key-b1
                    div.key__right.face.face--key-b1
                    div.key__left.face.face--key-b2
                    div.key__top.face.face--key-b1
                    div.key__bottom.face.face--key-b2
                - var n = 1;
                    while n < 13
                        div.key.flex
                            div.key__front.face
                            div.key__back.face
                            div.key__right.face
                            div.key__left.face
                            div.key__top.face
                            div.key__bottom.face
                        - n++
                div.key.key--w2.flex
                    div.key__front.key__front--w2.face.face--key-b3
                    div.key__back.key__back--w2.face.face--key-b1
                    div.key__right.key__right--w2.face.face--key-b1
                    div.key__left.key__left--w2.face.face--key-b2
                    div.key__top.key__top--w2.face.face--key-b1
                    div.key__bottom.key__bottom--w2.face.face--key-b2
                        
            //----------------------
            div.keys
                div.key.key--w2.flex
                    div.key__front.key__front--w2.face.face--key-b3
                    div.key__back.key__back--w2.face.face--key-b1
                    div.key__right.key__right--w2.face.face--key-b1
                    div.key__left.key__left--w2.face.face--key-b2
                    div.key__top.key__top--w2.face.face--key-b1
                    div.key__bottom.key__bottom--w2.face.face--key-b2
                - var n = 1;
                    while n < 13
                        div.key.flex
                            div.key__front.face
                            div.key__back.face
                            div.key__right.face
                            div.key__left.face
                            div.key__top.face
                            div.key__bottom.face
                        - n++
                div.key.flex
                    div.key__front.face.face--key-b3
                    div.key__back.face.face--key-b1
                    div.key__right.face.face--key-b1
                    div.key__left.face.face--key-b2
                    div.key__top.face.face--key-b1
                    div.key__bottom.face.face--key-b2
    
            //----------------------
            div.keys
                div.key.key--w3.flex
                    div.key__front.key__front--w3.face.face--key-b3
                    div.key__back.key__back--w3.face.face--key-b1
                    div.key__right.key__right--w3.face.face--key-b1
                    div.key__left.key__left--w3.face.face--key-b2
                    div.key__top.key__top--w3.face.face--key-b1
                    div.key__bottom.key__bottom--w3.face.face--key-b2
                - var n = 1;
                    while n < 11
                        div.key.flex
                            div.key__front.face
                            div.key__back.face
                            div.key__right.face
                            div.key__left.face
                            div.key__top.face
                            div.key__bottom.face
                        - n++
                div.key.key--w2.flex
                    div.key__front.key__front--w2.face.face--key-o3
                    div.key__back.key__back--w2.face.face--key-o1
                    div.key__right.key__right--w2.face.face--key-o1
                    div.key__left.key__left--w2.face.face--key-o2
                    div.key__top.key__top--w2.face.face--key-o1
                    div.key__bottom.key__bottom--w2.face.face--key-o2

    
            //----------------------
            div.keys
                div.key.key--w2.flex
                    div.key__front.key__front--w2.face.face--key-b3
                    div.key__back.key__back--w2.face.face--key-b1
                    div.key__right.key__right--w2.face.face--key-b1
                    div.key__left.key__left--w2.face.face--key-b2
                    div.key__top.key__top--w2.face.face--key-b1
                    div.key__bottom.key__bottom--w2.face.face--key-b2
                - var n = 1;
                    while n < 11
                        div.key.flex
                            div.key__front.face
                            div.key__back.face
                            div.key__right.face
                            div.key__left.face
                            div.key__top.face
                            div.key__bottom.face
                        - n++
                div.key.key--w3.flex
                    div.key__front.key__front--w3.face.face--key-b3
                    div.key__back.key__back--w3.face.face--key-b1
                    div.key__right.key__right--w3.face.face--key-b1
                    div.key__left.key__left--w3.face.face--key-b2
                    div.key__top.key__top--w3.face.face--key-b1
                    div.key__bottom.key__bottom--w3.face.face--key-b2

    
            //----------------------
            div.keys
                div.key.flex
                    div.key__front.face.face--key-b3
                    div.key__back.face.face--key-b1
                    div.key__right.face.face--key-b1
                    div.key__left.face.face--key-b2
                    div.key__top.face.face--key-b1
                    div.key__bottom.face.face--key-b2
                div.key.flex
                    div.key__front.face.face--key-o3
                    div.key__back.face.face--key-o1
                    div.key__right.face.face--key-o1
                    div.key__left.face.face--key-o2
                    div.key__top.face.face--key-o1
                    div.key__bottom.face.face--key-o2
                - var n = 1;
                    while n < 3
                        div.key.flex
                            div.key__front.face.face--key-b3
                            div.key__back.face.face--key-b1
                            div.key__right.face.face--key-b1
                            div.key__left.face.face--key-b2
                            div.key__top.face.face--key-b1
                            div.key__bottom.face.face--key-b2
                        - n++
                        
                div.key.key--w6.flex
                    div.key__front.key__front--w6.face
                    div.key__back.key__back--w6.face
                    div.key__right.key__right--w6.face
                    div.key__left.key__left--w6.face
                    div.key__top.key__top--w6.face
                    div.key__bottom.key__bottom--w6.face        
                
                - var n = 1;
                    while n < 6
                        div.key.flex
                            div.key__front.face.face--key-b3
                            div.key__back.face.face--key-b1
                            div.key__right.face.face--key-b1
                            div.key__left.face.face--key-b2
                            div.key__top.face.face--key-b1
                            div.key__bottom.face.face--key-b2
                        - n++

        div.keyboard__bottom.face

View Compiled

/* Variables */


$bg-1: #1a1919;
$bg-2: #0d0c0c;

$keyboard-1: #FFFFFB;
$keyboard-2: #EAE7E5;
$keyboard-3: #9C9C9C;

$key-1: #FFFFFB;
$key-2: #b8b8b8;
$key-3: #838383;

$blue-1: #A9DFFD;
$blue-2: #8FD2F8;
$blue-3: #426585;

$orange-1: #FFA28E;
$orange-2: #B46266;
$orange-3: #8E3E43;

$screen-1: #4D4A5D;

/* Reset */
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    transform-style: preserve-3d;
}
/* Generic */
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $bg-1;
    overflow: hidden;

    font-family: sans-serif;
    font-weight: bolder;
    color: rgba($key-1, .7);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.main{
    width: 800px;
    height: 600px;
    position: relative;
    // background: url("bg.jpg");
    cursor: pointer;
    margin-top: 200px;
    @media(max-width: 1000px){ transform: scale(.75); }
    @media(max-width: 800px){ transform: scale(.5); }
    @media(max-width: 700px){ transform: scale(.4); }
    @media(max-width: 500px){ transform: scale(.3); }
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.face{ position: absolute; }

/*Base*/
/*=================================*/
/*=================================*/

$width-kb: 500px;
$height-kb: 160px;
$depth-kb: 25px;

.screen{
    width: $width-kb / 1.65;
    height: $height-kb * 1.5;
    transform:
        translateZ(100px)
        translateY(-200px)
        translateZ(50px)
        rotateX(270deg)
    ;
    background-color: $blue-1;
    border-radius: 10px;

    box-shadow:
        0 0 5px rgba($blue-1, .8),
        0 0 10px rgba($blue-1, .7),
        0 0 15px rgba($blue-1, .6),
        0 0 20px rgba($blue-1, .5),
        0 0 40px rgba($blue-1, .4),
        0 0 60px rgba($blue-1, .3)
    ;
    animation: screen 1s ease-in alternate infinite ;
}

.keyboard{
    width: $width-kb;
    height: $height-kb;
    transform:
        perspective(10000px)
        rotateX(50deg)
        rotateZ(-25deg)
    ;

    &__front{
        width: $width-kb;
        height: $depth-kb;
        transform: rotateX(-90deg) translateZ($height-kb / 2);
        background-color: $keyboard-3;
    }
    &__back{
        width: $width-kb;
        height: $depth-kb;
        transform: rotateX( 90deg) translateZ($height-kb / 2);
        background-color: $keyboard-1;
    }
    &__top{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: $width-kb;
        height: $height-kb;
        transform: rotateY(0deg) translateZ($depth-kb / 2);
        background-image: linear-gradient(to bottom, lighten($blue-1, 10), lighten($bg-1, 10));
    }
    &__bottom{
        width: $width-kb;
        height: $height-kb;
        transform: rotateY(180deg) translateZ($depth-kb / 2);
        background-color: $keyboard-2;

        box-shadow:
        -20px 40px 0 $bg-2,
        0px 40px 0 $bg-2,
        5px -0px 0 $bg-2,
        5px 40px 0 $bg-2
        ;
    }
    &__right{
        width: $depth-kb;
        height: $height-kb;
        transform: rotateY(90deg) translateZ($width-kb / 2);
        background-color: $keyboard-1;
    }
    &__left{
        width: $depth-kb;
        height: $height-kb;
        transform: rotateY(90deg) translateZ(-$width-kb / 2);
        background-color: $keyboard-2;
    }
}
/*=================================*/
/*=================================*/
$width-ky: 30px;
$height-ky: 27px;
$depth-ky: 15px;

.keys{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    transform: translateZ($depth-ky / 2);
    padding: 0 2px;
}

.key{
    width: $width-ky;
    height: $height-ky;

    &--w2{ width:  $width-ky * 2; }
    &--w3{ width:  $width-ky * 3; }
    &--w6{ width:  $width-ky * 6.5; }
    transition: .05s ease;


    &__front{
        width: $width-ky;
        height: $depth-ky;
        transform: rotateX(-90deg) translateZ($height-ky / 2);
        background-color: $key-3;

        &--w2{ width: $width-ky * 2; }
        &--w3{ width: $width-ky * 3; }
        &--w6{ width: $width-ky * 6.5; }
    }
    &__back{
        width: $width-ky;
        height: $depth-ky;
        transform: rotateX( 90deg) translateZ($height-ky / 2);
        background-color: $key-1;

        &--w2{ width: $width-ky * 2; }
        &--w3{ width: $width-ky * 3; }
        &--w6{ width: $width-ky * 6.5; }
    }
    &__top{
        width: $width-ky;
        height: $height-ky;
        transform: rotateY(0deg) translateZ($depth-ky / 2);
        background-color: $key-1;
        background-image: linear-gradient(to bottom, lighten($blue-1, 15)  , $key-1);


        &--w2{ width: $width-ky * 2; }
        &--w3{ width: $width-ky * 3; }
        &--w6{ width: $width-ky * 6.5; }
    }
    &__bottom{
        width: $width-ky;
        height: $height-ky;
        transform: rotateY(180deg) translateZ($depth-ky / 2);
        background-color: $key-3;

        &--w2{ width: $width-ky * 2; }
        &--w3{ width: $width-ky * 3; }
        &--w6{ width: $width-ky * 6.5; }
    }
    &__right{
        width: $depth-ky;
        height: $height-ky;
        transform: rotateY(90deg) translateZ($width-ky / 2);
        background-color: $key-3;

        &--w2{ transform: rotateY(90deg) translateZ($width-ky);}
        &--w3{ transform: rotateY(90deg) translateZ($width-ky * 1.5);}
        &--w6{ transform: rotateY(90deg) translateZ($width-ky * 3.25);}
    }
    &__left{
        width: $depth-ky;
        height: $height-ky;
        transform: rotateY(90deg) translateZ(-$width-ky / 2);
        background-image: linear-gradient(to bottom, lighten($key-2 , 5) , $key-2);

        &--w2{ transform: rotateY(90deg) translateZ(-$width-ky);}
        &--w3{ transform: rotateY(90deg) translateZ(-$width-ky * 1.5);}
        &--w6{ transform: rotateY(90deg) translateZ(-$width-ky * 3.25);}
    }
}
/*=================================*/
/*=================================*/
.face--key-b1{ background: $blue-1; }
.face--key-b2{ background-image: linear-gradient(to bottom, lighten($blue-2 , 5) , $blue-2); }
.face--key-b3{ background-color: $blue-3; }

.face--key-o1{ background: $orange-1; }
.face--key-o2{ background-image: linear-gradient(to bottom, lighten($orange-2 , 5) , $orange-2); }
.face--key-o3{ background-color: $orange-3; }

.key--down{
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateZ(-5px);
    transition: .05s ease;

    > .key__top{
        background:  lighten($orange-1, 10);
    }
}
/*=================================*/
/*=================================*/
@keyframes screen {
    0%, 90%, 96%{ background-color: $blue-1 }
    93%, 100%{ background-color: rgba($blue-2, .8); }
}

View Compiled

/*
Designed by: Miguel E.
Original image: https://dribbble.com/shots/6276517-Hello
*/

const m = document.querySelector("#m");
const k = document.querySelector("#k");
const s = document.querySelector("#s");

const kd = document.querySelectorAll(".key")
let con = 0;

let base = (e) => {
    let  x = e.pageX / window.innerWidth - 0.5;
    let  y = e.pageY / window.innerHeight - 0.5;
    k.style.transform = `
        perspective(10000px)
        rotateX(${ y * 10  + 60}deg)
        rotateZ(-${ x * 40  + 35}deg)
    `;
}

let addKey = (e) => {
    let kc = event.keyCode;

    if ( (kc >= 65 && kc <= 90) || kc == 32) {
        if (kc == 81) { kd[15].classList.add("key--down"); }
        else if (kc == 87) { kd[16].classList.add("key--down"); }
        else if (kc == 69) { kd[17].classList.add("key--down"); }
        else if (kc == 82) { kd[18].classList.add("key--down"); }
        else if (kc == 84) { kd[19].classList.add("key--down"); }
        else if (kc == 89) { kd[20].classList.add("key--down"); }
        else if (kc == 85) { kd[21].classList.add("key--down"); }
        else if (kc == 73) { kd[22].classList.add("key--down"); }
        else if (kc == 79) { kd[23].classList.add("key--down"); }
        else if (kc == 80) { kd[24].classList.add("key--down"); }
        else if (kc == 65) { kd[29].classList.add("key--down"); }
        else if (kc == 83) { kd[30].classList.add("key--down"); }
        else if (kc == 68) { kd[31].classList.add("key--down"); }
        else if (kc == 70) { kd[32].classList.add("key--down"); }
        else if (kc == 71) { kd[33].classList.add("key--down"); }
        else if (kc == 72) { kd[34].classList.add("key--down"); }
        else if (kc == 74) { kd[35].classList.add("key--down"); }
        else if (kc == 75) { kd[36].classList.add("key--down"); }
        else if (kc == 76) { kd[37].classList.add("key--down"); }
        else if (kc == 192) { kd[38].classList.add("key--down"); }
        else if (kc == 90) { kd[41].classList.add("key--down"); }
        else if (kc == 88) { kd[42].classList.add("key--down"); }
        else if (kc == 67) { kd[43].classList.add("key--down"); }
        else if (kc == 86) { kd[44].classList.add("key--down"); }
        else if (kc == 66) { kd[45].classList.add("key--down"); }
        else if (kc == 78) { kd[46].classList.add("key--down"); }
        else if (kc == 77) { kd[47].classList.add("key--down"); }
        else if (kc == 13) { kd[39].classList.add("key--down"); }
        else if (kc == 32) {
            kd[56].classList.add("key--down");
            s.innerHTML += "&nbsp;";
        }
        s.innerHTML += String.fromCharCode(kc);
        con++;
        if (con > 10) { s.innerHTML = ""; con = 0; }
    }
    if (kc == 8) {
        s.innerHTML = "";
        kd[27].classList.add("key--down");
        con = 0;
    }

}
let removeKey = (e) => {
    let kc = event.keyCode;
    if (kc == 81) { kd[15].classList.remove("key--down"); }
    else if (kc == 87) { kd[16].classList.remove("key--down"); }
    else if (kc == 69) { kd[17].classList.remove("key--down"); }
    else if (kc == 82) { kd[18].classList.remove("key--down"); }
    else if (kc == 84) { kd[19].classList.remove("key--down"); }
    else if (kc == 89) { kd[20].classList.remove("key--down"); }
    else if (kc == 85) { kd[21].classList.remove("key--down"); }
    else if (kc == 73) { kd[22].classList.remove("key--down"); }
    else if (kc == 79) { kd[23].classList.remove("key--down"); }
    else if (kc == 80) { kd[24].classList.remove("key--down"); }
    else if (kc == 65) { kd[29].classList.remove("key--down"); }
    else if (kc == 83) { kd[30].classList.remove("key--down"); }
    else if (kc == 68) { kd[31].classList.remove("key--down"); }
    else if (kc == 70) { kd[32].classList.remove("key--down"); }
    else if (kc == 71) { kd[33].classList.remove("key--down"); }
    else if (kc == 72) { kd[34].classList.remove("key--down"); }
    else if (kc == 74) { kd[35].classList.remove("key--down"); }
    else if (kc == 75) { kd[36].classList.remove("key--down"); }
    else if (kc == 76) { kd[37].classList.remove("key--down"); }
    else if (kc == 192) { kd[38].classList.remove("key--down"); }
    else if (kc == 90) { kd[41].classList.remove("key--down"); }
    else if (kc == 88) { kd[42].classList.remove("key--down"); }
    else if (kc == 67) { kd[43].classList.remove("key--down"); }
    else if (kc == 86) { kd[44].classList.remove("key--down"); }
    else if (kc == 66) { kd[45].classList.remove("key--down"); }
    else if (kc == 78) { kd[46].classList.remove("key--down"); }
    else if (kc == 77) { kd[47].classList.remove("key--down"); }
    else if (kc == 32) { kd[56].classList.remove("key--down"); }
    else if (kc == 13) { kd[39].classList.remove("key--down"); }
    else if (kc == 8) { kd[27].classList.remove("key--down"); }
}

m.addEventListener("mousemove", base);
window.addEventListener("keydown", addKey);
window.addEventListener("keyup", removeKey);

This Pen is owned by Ricardo Oliva Alonso on CodePen.

See more by @ricardoolivaalonso on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.