CodePen Embed - Victrola

svg.svg-icon(viewbox='0 0 20 20')#text
    path(d='M17.969,10c0,1.707-0.5,3.366-1.446,4.802c-0.076,0.115-0.203,0.179-0.333,0.179c-0.075,0-0.151-0.022-0.219-0.065c-0.184-0.122-0.233-0.369-0.113-0.553c0.86-1.302,1.314-2.812,1.314-4.362s-0.454-3.058-1.314-4.363c-0.12-0.183-0.07-0.43,0.113-0.552c0.186-0.12,0.432-0.07,0.552,0.114C17.469,6.633,17.969,8.293,17.969,10 M15.938,10c0,1.165-0.305,2.319-0.88,3.339c-0.074,0.129-0.21,0.201-0.347,0.201c-0.068,0-0.134-0.016-0.197-0.052c-0.191-0.107-0.259-0.351-0.149-0.542c0.508-0.9,0.776-1.918,0.776-2.946c0-1.028-0.269-2.046-0.776-2.946c-0.109-0.191-0.042-0.434,0.149-0.542c0.193-0.109,0.436-0.042,0.544,0.149C15.634,7.681,15.938,8.834,15.938,10 M13.91,10c0,0.629-0.119,1.237-0.354,1.811c-0.063,0.153-0.211,0.247-0.368,0.247c-0.05,0-0.102-0.01-0.151-0.029c-0.203-0.084-0.301-0.317-0.217-0.521c0.194-0.476,0.294-0.984,0.294-1.508s-0.1-1.032-0.294-1.508c-0.084-0.203,0.014-0.437,0.217-0.52c0.203-0.084,0.437,0.014,0.52,0.217C13.791,8.763,13.91,9.373,13.91,10 M11.594,3.227v13.546c0,0.161-0.098,0.307-0.245,0.368c-0.05,0.021-0.102,0.03-0.153,0.03c-0.104,0-0.205-0.04-0.281-0.117l-3.669-3.668H2.43c-0.219,0-0.398-0.18-0.398-0.398V7.012c0-0.219,0.179-0.398,0.398-0.398h4.815l3.669-3.668c0.114-0.115,0.285-0.149,0.435-0.087C11.496,2.92,11.594,3.065,11.594,3.227 M7.012,7.41H2.828v5.18h4.184V7.41z M10.797,4.189L7.809,7.177v5.646l2.988,2.988V4.189z')
audio#audio
    source(src="https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/4.mp3",type="audio/mpeg")
div.shadows
    div.shadow-a.face#shadows
    div.shadow-b.face#shadowsb
    div.shadow-c.face#shadowsc
div.main#radio
    div.foots
        div.foot__shadows
            div.foot__shadow
            div.foot__shadow
            div.foot__shadow
            div.foot__shadow
        - var n = 0
        while n < 4
            div.foot
                div.foot__front.face 
                div.foot__back.face 
                div.foot__right.face 
                div.foot__left.face 
                div.foot__top.face 
                div.foot__bottom.face 
            - n++
            
    div.player
        div.player__front.face 
            div.speakers
                div.speaker
                    div.speaker__front.face 
                    div.speaker__back.face 
                    div.speaker__right.face 
                    div.speaker__left.face 
                    div.speaker__top.face 
                        div.speaker__top-ca.face.speaker-ca &#9835;
                        div.speaker__top-cb.face.speaker-cb &#9834;
                    div.speaker__bottom.face 
                div.speaker
                    div.speaker__front.face 
                    div.speaker__back.face 
                    div.speaker__right.face 
                    div.speaker__left.face 
                    div.speaker__top.face 
                        div.speaker__top-ca.face.speaker-ca &#9835;
                        div.speaker__top-cb.face.speaker-cb &#9834;
                    div.speaker__bottom.face 
                div.player__text victrola
            
        div.player__back.face 
        div.player__right.face 
        div.player__left.face 
        div.player__top.face 
        div.player__bottom.face 
        
    div.playert#playert
        
        div.playert-tt
            div.playert-tt__front.face 
            div.playert-tt__back.face 
            div.playert-tt__right.face 
            div.playert-tt__left.face 
            div.playert-tt__top.face 
            div.playert-tt__bottom.face 
        div.playert-ta.playert-ta1
            div.playert-ta__front.face 
            div.playert-ta__back.face 
            div.playert-ta__right.face 
            div.playert-ta__left.face 
            div.playert-ta__top.face 
            div.playert-ta__bottom.face 
        div.playert-ta.playert-ta2
            div.playert-ta__front.face 
            div.playert-ta__back.face 
            div.playert-ta__right.face 
            div.playert-ta__left.face 
            div.playert-ta__top.face 
            div.playert-ta__bottom.face 
        div.playert-tb.playert-tb1
            div.playert-tb__front.face 
            div.playert-tb__back.face 
            div.playert-tb__right.face 
            div.playert-tb__left.face 
            div.playert-tb__top.face 
            div.playert-tb__bottom.face 
        div.playert-tb.playert-tb2
            div.playert-tb__front.face 
            div.playert-tb__back.face 
            div.playert-tb__right.face 
            div.playert-tb__left.face 
            div.playert-tb__top.face 
            div.playert-tb__bottom.face 
        
    div.parts
        div.disc#disc
        div.shadow-disc
        div.speakers
            div.control
                div.control-ta
                    div.control-ta__front.face 
                    div.control-ta__back.face 
                    div.control-ta__right.face 
                    div.control-ta__left.face 
                    div.control-ta__top.face 
                    div.control-ta__bottom.face 
                div.control-ta
                    div.control-ta__front.face 
                    div.control-ta__back.face 
                    div.control-ta__right.face 
                    div.control-ta__left.face 
                    div.control-ta__top.face 
                    div.control-ta__bottom.face 
                div.control-tb
                    div.control-tb__front.face 
                    div.control-tb__back.face 
                    div.control-tb__right.face 
                    div.control-tb__left.face 
                    div.control-tb__top.face 
                    div.control-tb__bottom.face 
                div.control-tb
                    div.control-tb__front.face 
                    div.control-tb__back.face 
                    div.control-tb__right.face 
                    div.control-tb__left.face 
                    div.control-tb__top.face 
                    div.control-tb__bottom.face 
                div.control-range#control
                    div.control-range__front.face 
                    div.control-range__back.face 
                    div.control-range__right.face 
                    div.control-range__left.face 
                    div.control-range__top.face 
                    div.control-range__bottom.face 
            div.needle
                div.needle-a
                    div.needle-a__front.face 
                    div.needle-a__back.face 
                    div.needle-a__right.face 
                    div.needle-a__left.face 
                    div.needle-a__top.face 
                    div.needle-a__bottom.face 
                div.needle-con#needle
                    div.needle-b
                        div.needle-b__front.face 
                        div.needle-b__back.face 
                        div.needle-b__right.face 
                        div.needle-b__left.face 
                        div.needle-b__top.face 
                        div.needle-b__bottom.face 
                    div.needle-c
                        div.needle-c__front.face 
                        div.needle-c__back.face 
                        div.needle-c__right.face 
                        div.needle-c__left.face 
                        div.needle-c__top.face 
                        div.needle-c__bottom.face 
                    div.needle-d
                        div.needle-d__front.face 
                        div.needle-d__back.face 
                        div.needle-d__right.face 
                        div.needle-d__left.face 
                        div.needle-d__top.face 
                        div.needle-d__bottom.face 
        
    div.borders
        div.border-ta
            div.border-ta__front.face 
            div.border-ta__back.face 
            div.border-ta__right.face 
            div.border-ta__left.face 
            div.border-ta__top.face 
            div.border-ta__bottom.face 
        div.border-ta
            div.border-ta__front.face 
            div.border-ta__back.face 
            div.border-ta__right.face 
            div.border-ta__left.face 
            div.border-ta__top.face 
            div.border-ta__bottom.face 
        div.border-tb
            div.border-tb__front.face 
            div.border-tb__back.face 
            div.border-tb__right.face 
            div.border-tb__left.face 
            div.border-tb__top.face 
            div.border-tb__bottom.face 
        div.border-tb
            div.border-tb__front.face 
            div.border-tb__back.face 
            div.border-tb__right.face 
            div.border-tb__left.face 
            div.border-tb__top.face 
            div.border-tb__bottom.face

View Compiled

$bg-1: #73E4E3;
$bg-2: #369DA4;

$cyan-1: #f2f2f2;
$cyan-2: darken($cyan-1, 5);
$cyan-3: darken($cyan-2, 10);
$cyan-4: darken($cyan-3, 8);

$yellow-1: darken($bg-1, 1);
$yellow-2: darken($yellow-1, 15);
$yellow-3: darken($yellow-2, 15);
$yellow-4: darken($yellow-3, 10);

$black-1: #582A42;
$black-2: #1f0d17;
$black-3: #000000;

/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
    &__front{ @include cube-front($width, $height, $depth); }
    &__back{ @include cube-back($width, $height, $depth); }
    &__right{ @include cube-right($width, $height, $depth); }
    &__left{ @include cube-left($width, $height, $depth); }
    &__top{ @include cube-top($width, $height, $depth);}
    &__bottom{ @include cube-bottom($width, $height, $depth); }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {

    animation: #{$animation} #{$time} infinite ease 1s;

    @keyframes #{$animation} {
        0%, 15%, 45%, 60%, 62%, 68%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
        }
        20%, 40%, 58%, 64%, 70%, 100%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
        }
    }
}
/**/
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}
/* Generic */
body{
  display: flex;
  justify-content: center;
  align-items: center;

    width: 100%;
    height: 100vh;
    overflow: hidden;
    user-select: none;
    background-color: $bg-1;

    cursor: pointer;
    font-family: monospace;
    text-transform: uppercase;
}

.face{ position: absolute; }

/***************/
.main,
.shadows{
  position: absolute;
    width: 28vw;
    height: 22vw;

  transform:
    perspective(20000px)
        rotateX(60deg)
        rotateZ(45deg)
    translateZ(-7vw)
        scale(.8)
  ;
}
.shadow-a{
    left: -.5vw;
    bottom: 0;
    width: 32vw;
    height: 26vw;
    background-color: darken($bg-2, 15);
}
.shadow-b{
    left:   .25vw;
    bottom: .5vw;
    width: 28vw;
    height: 22vw;
    background-color: darken($bg-2, 30);
    filter: blur(8px);
}
.shadow-c{
    left: -.5vw;
    top: 0;
    width: 32vw;
    height: 19.5vw;
    background-color: darken($bg-2, 15);
    z-index: -4;
    transition: .5s linear 2s;
}
.svg-icon {
    position: absolute;
    bottom: 50px;
    width: 30px;
    height: 30px;
    transform: translateZ(20000px);
    transition: .35s;

    &:hover{ transform: scale(1.1); transition: 0s;}
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
    fill: #ffffff;
}

.svg-icon circle {
    stroke: #ffffff;
    stroke-width: 1;
}
/***************/
.foots{
    width: 100%;
    height: 100%;
    position: absolute;
}
    .foot{
        $width-el: 1.5vw;
        $height-el: 1vw;
        $depth-el: .75vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el * 2;
        position: absolute;


        &:nth-of-type(1){ top: 1vw; left: 1vw; }
        &:nth-of-type(2){ top: 1vw; right: 1vw; }

        &:nth-of-type(1),
        &:nth-of-type(2){
            .foot__front{ background-color: darken($black-3, 15); }
        }

        &:nth-of-type(3){ bottom: 1vw; left: 1vw; }
        &:nth-of-type(4){ bottom: 1vw; right: 1vw;}

        &:nth-of-type(3),
        &:nth-of-type(4){
            .foot__front{ background-color: darken($black-3, 10); }
            .foot__right{ background-color: darken($black-3, 12); }
        }

        &__front{ background-color: $black-3; }
        &__back{ background-color: $black-3; }
        &__right{ background-color: $black-3; }
        &__left{ background-color: $black-2; }
        &__top{ background-color: $black-3; }
        &__bottom{  background-color: $black-3; }

        &__shadows{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }
        &__shadow{
            position: absolute;
            width: 1.7vw;
            height: 1.7vw;
            background-color: darken($bg-2, 32);
            filter: blur(6px);

            &:nth-of-type(1){ top: 1vw; left: 1vw; }
            &:nth-of-type(2){ top: 1vw; right: 1vw; }
            &:nth-of-type(3){ bottom: 1vw; left: 1vw; }
            &:nth-of-type(4){ bottom: 1vw; right: 1vw;}

        }
    }
/*-------------*/
.player{
    $width-el: 28vw;
    $height-el: 5vw;
    $depth-el: 11vw;

    @include cube($width-el, $height-el, $depth-el);

    width: $width-el;
    height: $depth-el;
    top: 0;
    position: absolute;
    transform: translateZ(1vw);
    transition: .2s;

    &__text{
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 1vw;
        transform: translateX(-50%) translateY(-50%);
        background-color: $cyan-2;
        color: $black-2;
    }
    &__front{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1vw;
        letter-spacing: .2vw;
        background-image: linear-gradient(to bottom, $cyan-2 48%, $cyan-3 48%, $cyan-3 52%, $cyan-2 52%);

    }
    &__back{ background-image: linear-gradient(to bottom, $cyan-3 48%, $cyan-4 48%, $cyan-4 52%, $cyan-3 52%); }
    &__right{ background-image: linear-gradient(to bottom, $cyan-3 48%, $cyan-4 48%, $cyan-4 52%, $cyan-3 52%); }
    &__left{ background-image: linear-gradient(to bottom, $cyan-1 48%, $cyan-2 48%, $cyan-2 52%, $cyan-1 52%); }
    &__top{ background-color: darken($cyan-1, 5); }
    &__bottom{ background-color: $cyan-3; }
}
/*-------------*/
.playert{
    $width-el: 28vw;
    $height-el: 5vw;
    $depth-el: 11vw;

    @include cube($width-el, $height-el, $depth-el);

    width: $width-el;
    height: $depth-el * 2;
    top: 0;
    position: absolute;

    transform-origin: top;
    transform: translateZ(6.1vw) rotateX(0);
    transition: .5s 2s;

    // &::before{
    //     content: '';
    //     position: absolute;
    //     width: 100%;
    //     height: 100%;
    //     transform: translateZ(2vw);
    //     background-color: $cyan-1;
    // }

    &-tt{
        $width-el: 28vw;
        $height-el: .25vw;
        $depth-el: 11vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el * 2;
        top: 0;
        position: absolute;
        transform: translateZ(1.8vw);


        &__front{ background-color: $cyan-2;}
        &__back{ background-color: $cyan-3; }
        &__right{ background-color: $cyan-1; }
        &__left{ background-color: $cyan-3; }
        &__top{ background-color: $cyan-1; }
        &__bottom{ background-color: lighten($cyan-1, 1); }
    }

    &-ta{
        $width-el: 1vw;
        $height-el: 2vw;
        $depth-el: 11vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el;
        top: 0;
        position: absolute;

        &1{
            left: 0;
            .playert-ta__front{ background-color: $cyan-2; }
            .playert-ta__back{ background-color: $cyan-3; }
            .playert-ta__right{ background-color: darken($cyan-2, 5); }
            .playert-ta__left{ background-color: $cyan-1; }
            .playert-ta__top{ background-color: $cyan-1; }
            .playert-ta__bottom{ background-color: $cyan-2; }
        }
        &2{
            right: 0;
            .playert-ta__front{ background-color: $cyan-2; }
            .playert-ta__back{ background-color: $cyan-3; }
            .playert-ta__right{ background-color: $cyan-3; }
            .playert-ta__left{ background-color: $cyan-2; }
            .playert-ta__top{ background-color: $cyan-1; }
            .playert-ta__bottom{ background-color: $cyan-2; }
        }
    }
    &-tb{
        $width-el: 27vw;
        $height-el: 2vw;
        $depth-el: .5vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el * 2;
        left: 0;
        position: absolute;

        &1{
            top: 0;
            .playert-tb__front{ background-color: darken($cyan-1, 3); }
            .playert-tb__back{ background-color: $cyan-3; }
            .playert-tb__right{ background-color: $cyan-3; }
            .playert-tb__left{ background-color: $cyan-1; }
            .playert-tb__top{ background-color: $cyan-1; }
            .playert-tb__bottom{ background-color: $cyan-2; }
        }
        &2{
            bottom: 0;
            .playert-tb__front{ background-color: $cyan-2; }
            .playert-tb__back{ background-color: $cyan-3; }
            .playert-tb__right{ background-color: $cyan-3; }
            .playert-tb__left{ background-color: $cyan-1; }
            .playert-tb__top{ background-color: $cyan-1; }
            .playert-tb__bottom{ background-color: $cyan-2; }
        }
    }
}
/*-------------*/
.parts{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(6vw);
}
    .disc{
        display: flex;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: calc(50% - 9.5vw);
        left: 1vw;
        width: 19vw;
        height: 19vw;
        transform: translateZ(.5vw);

        background-image: repeating-radial-gradient(circle, $black-1, $black-1 .1vw, $black-2 .1vw, $black-2 .2vw);
        border-radius: 50%;

        &::before{
            content: '';
            position: absolute;
            width: 30%;
            height: 30%;
            background-image: linear-gradient($cyan-1 50%, $black-1 50%);
            border-radius: 50%;
        }
        &::after{
            content: '';
            position: absolute;
            width: 8%;
            height: 8%;
            background-color: $black-2;
            border-radius: 50%;
        }
    }
    .shadow-disc
    {
        position: absolute;
        top: calc(50% - 9.5vw);
        left: 1vw;
        width: 19vw;
        height: 19vw;
        background-color: $black-3;
        border-radius: 50%;
        box-shadow:
            .005vw .005vw .75vw rgba($black-1, .75),
            -.005vw .005vw .75vw rgba($black-1, .75),
            .005vw -.005vw .75vw rgba($black-2, .75),
            -.005vw -.005vw .75vw rgba($black-1, .75)
        ;
    }
    .speakers{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .speaker{
        $width-el: 7vw;
        $height-el: .75vw;
        $depth-el: 1.75vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el * 2;
        position: absolute;
        top: .75vw;
        transition: .2s linear;

        &:nth-of-type(1){ right: 1vw; }
        &:nth-of-type(2){ left: 1vw; }

        &__front{ background-color: $black-1;}
        &__back{ background-color: darken($black-1, 8) }
        &__right{ background-color: $black-3; }
        &__left{ background-color: $black-1; }
        &__top{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: darken($black-1, 15);
            &-ca{
                position: absolute;
                font-size: 1.75vw;
                opacity: 0;
                left: 40%;
                color: $cyan-3;
            }
            &-cb{
                position: absolute;
                font-size: 1.5vw;
                opacity: 0;
                right: 40%;
                color: $cyan-3;
            }
        }
        &__bottom{ background-color: $black-3; }

        box-shadow:
            .005vw .005vw 1vw rgba($black-1, .3),
            -.005vw .005vw 1vw rgba($black-1, .3),
            .005vw -.005vw 1vw rgba($black-2, .3),
            -.005vw -.005vw 1vw rgba($black-1, .3)
        ;

    }

    $width-el: 7vw;
    $height-el: .75vw;
    $height-finish: 1vw;
    $depth-el: 1.75vw;

    .sfa{ @include face-ani(grow-front-speaker, 1s, cube-front, $width-el, $height-el, $depth-el); }
    .sba{ @include face-ani(grow-back-speaker, 1s, cube-back, $width-el, $height-el, $depth-el); }
    .sra{ @include face-ani(grow-right-speaker, 1s, cube-right, $width-el, $height-el, $depth-el); }
    .sla{ @include face-ani(grow-left-speaker, 1s, cube-left, $width-el, $height-el, $depth-el); }
    .sta{ @include face-ani(grow-top-speaker, 1s, cube-top, $width-el, $height-el, $depth-el); }

    .control{
        position: absolute;
        right: 2vw;
        bottom: 2vw;
        width: 1.5vw;
        height: 6vw;
        background-color: $black-3;

        box-shadow:
            .005vw .005vw .75vw rgba($black-1, .25),
            -.005vw .005vw .75vw rgba($black-1, .25),
            .005vw -.005vw .75vw rgba($black-2, .25),
            -.005vw -.005vw .75vw rgba($black-1, .25)
        ;
    }
        .control-ta{
            $width-el: .5vw;
            $height-el: .25vw;
            $depth-el: 3vw;

            @include cube($width-el, $height-el, $depth-el);

            width: $width-el;
            height: $depth-el;
            top: 0;
            position: absolute;

            &__front{ background-color: $black-2; }
            &__back{ background-color: $black-3; }
            &__right{ background-color: $black-3; }
            &__left{ background-color: $black-1; }
            &__top{ background-color: $black-1; }
            &__bottom{ background-color: $black-3; }

            &:nth-of-type(1){ left: 0; }
            &:nth-of-type(2){ right: 0; }
        }
        .control-tb{
            $width-el: .5vw;
            $height-el: .25vw;
            $depth-el: .25vw;

            @include cube($width-el, $height-el, $depth-el);

            width: $width-el;
            height: $depth-el;
            left: .5vw;
            position: absolute;

            &:nth-of-type(3){
                top: 0;
                .control-tb__front{ background-color: $black-3; }
                .control-tb__back{ background-color: $black-3; }
                .control-tb__right{ background-color: $black-3; }
                .control-tb__left{ background-color: $black-1; }
                .control-tb__top{ background-color: $black-1; }
                .control-tb__bottom{ background-color: $black-3; }
            }
            &:nth-of-type(4){
                bottom: .25vw;
                .control-tb__front{ background-color: $black-2; }
                .control-tb__back{ background-color: $black-3; }
                .control-tb__right{ background-color: $black-3; }
                .control-tb__left{ background-color: $black-1; }
                .control-tb__top{ background-color: $black-1; }
                .control-tb__bottom{ background-color: $black-3; }
            }
        }
        .control-range{
            $width-el: 1.4vw;
            $height-el: .25vw;
            $depth-el: .25vw;

            @include cube($width-el, $height-el, $depth-el);

            width: $width-el;
            height: $depth-el;
            top: 2vw;
            left: .05vw;
            position: absolute;
            transform: translateZ(.25vw);

            &__front{ background-color: $yellow-2; }
            &__back{ background-color: $yellow-3; }
            &__right{ background-color: $yellow-3; }
            &__left{ background-color: $yellow-1; }
            &__top{ background-color: $yellow-1; }
            &__bottom{ background-color: $yellow-3; }
        }
        .needle{
            display: flex;
            justify-content: center;
            position: absolute;
            right: 2vw;
            top: 2vw;
            width: 2vw;
            height: 2vw;

            box-shadow:
                .005vw .005vw .75vw rgba($black-1, .25),
                -.005vw .005vw .75vw rgba($black-1, .25),
                .005vw -.005vw .75vw rgba($black-2, .25),
                -.005vw -.005vw .75vw rgba($black-1, .25)
            ;
        }
            .needle-con{
                position: absolute;
                transform-origin: top right;
                transform: translateX(-.25vw) rotateZ(-10deg);
                transition: 1s;
                transition-delay: 1s;
            }
            .needle-a{
                $width-el: 2vw;
                $height-el: 1.5vw;
                $depth-el: 1vw;

                @include cube($width-el, $height-el, $depth-el);

                position: absolute;
                width: $width-el;
                height: $depth-el;

                &__front{ background-color: $black-2; }
                &__back{ background-color: $black-3; }
                &__right{ background-color: $black-3; }
                &__left{ background-color: $black-1; }
                &__top{ background-color: $black-1; }
                &__bottom{ background-color: $black-3; }
            }
            .needle-b{
                $width-el: .25vw;
                $height-el: .25vw;
                $depth-el: 5vw;

                @include cube($width-el, $height-el, $depth-el);

                position: absolute;
                width: $width-el;
                height: $depth-el;
                top: -.7vw;
                transform: translateZ(1vw) rotateZ(24deg);

                &__front{ background-color: $black-2; }
                &__back{ background-color: $black-3; }
                &__right{ background-color: $black-3; }
                &__left{ background-color: $black-1; }
                &__top{ background-color: $black-1; }
                &__bottom{
                    background-color: $black-3;

                    &::before{
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-color: $black-2;
                        filter: blur(5px);
                        transform: translateZ(.7vw);
                    }
                }
            }
            .needle-c{
                $width-el: .25vw;
                $height-el: .25vw;
                $depth-el: 3.5vw;

                @include cube($width-el, $height-el, $depth-el);

                position: absolute;
                width: $width-el;
                height: $depth-el;
                top: 8.6vw;
                right: 2.7vw;
                transform-origin: top left;
                transform: translateZ(1vw) rotateZ(60deg);

                &__front{ background-color: $black-2; }
                &__back{ background-color: $black-3; }
                &__right{ background-color: $black-3; }
                &__left{ background-color: $black-1; }
                &__top{ background-color: $black-1; }
                &__bottom{
                    background-color: $black-3;

                    &::before{
                        content: '';
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-color: $black-2;
                        filter: blur(5px);
                        transform: translateZ(.7vw);
                    }
                }
            }
            .needle-d{
                $width-el: .5vw;
                $height-el: .5vw;
                $depth-el: 1vw;

                @include cube($width-el, $height-el, $depth-el);

                position: absolute;
                width: $width-el;
                height: $depth-el;
                top: 11vw;
                right: 7vw;
                transform-origin: top left;
                transform: translateZ(.9vw) rotateZ(60deg);

                &__front{ background-color: $yellow-2; }
                &__back{ background-color: $yellow-3; }
                &__right{ background-color: $yellow-3; }
                &__left{ background-color: $yellow-1; }
                &__top{ background-color: $yellow-1; }
                &__bottom{ background-color: $yellow-3; }
            }
/*-------------*/
.borders{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(6vw);
}
    .border-ta{
        $width-el: 1vw;
        $height-el: .25vw;
        $depth-el: 11vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el;
        top: 0;
        position: absolute;

        &__front{ background-color: $cyan-2; }
        &__back{ background-color: $cyan-3; }
        &__right{ background-color: $cyan-3; }
        &__left{ background-color: $cyan-1; }
        &__top{ background-color: $cyan-1; }
        &__bottom{ background-color: $cyan-3; }

        &:nth-of-type(1){ left: 0; }
        &:nth-of-type(2){ right: 0; }
    }
    .border-tb{
        $width-el: 26vw;
        $height-el: .25vw;
        $depth-el: .5vw;

        @include cube($width-el, $height-el, $depth-el);

        width: $width-el;
        height: $depth-el * 2;
        left: 1vw;
        position: absolute;

        &:nth-of-type(3){
            top: 0;
            .border-tb__front{ background-color: $cyan-3; }
            .border-tb__back{ background-color: $cyan-3; }
            .border-tb__right{ background-color: $cyan-3; }
            .border-tb__left{ background-color: $cyan-1; }
            .border-tb__top{ background-color: $cyan-1; }
            .border-tb__bottom{ background-color: $cyan-3; }
        }
        &:nth-of-type(4){
            bottom: 0;
            .border-tb__front{ background-color: $cyan-2; }
            .border-tb__back{ background-color: $cyan-3; }
            .border-tb__right{ background-color: $cyan-3; }
            .border-tb__left{ background-color: $cyan-1; }
            .border-tb__top{ background-color: $cyan-1; }
            .border-tb__bottom{ background-color: $cyan-3; }
        }
    }

/************/
.is-radio-active{ animation: radio .5s infinite alternate cubic-bezier(.32,2,.55,.27) 2.75s ; }
.is-playert-active{ transform: translateZ(6.2vw) rotateX(45deg); transition: .5s; }
.is-disc-active{ animation: disc 6s infinite linear .75s ; }
.is-control-active{ animation: control 4s infinite linear 2.75s ; }
.is-needle-active{ transform: translateX(-.25vw) rotateZ(10deg) rotateY(-1deg); transition: 1s; }
.is-shadows-active{ animation: shadows .5s infinite alternate cubic-bezier(.32,2,.55,.27) 2.75s ; }
.is-shadowsb-active{ animation: shadowsb .5s infinite alternate cubic-bezier(.32,2,.55,.27) 2.75s ; }
.is-shadowsc-active{ top: -100%; transition: .5s; animation: shadows .5s infinite alternate cubic-bezier(.32,2,.55,.27) 2.75s ;}
.is-sca-active{ animation: sca 2s infinite alternate cubic-bezier(.32,2,.55,.27) 1s ; }
.is-scb-active{ animation: sca 2s infinite alternate cubic-bezier(.32,2,.55,.27) 1.25s ; }
.is-text-active{ opacity: 0; transition: .35s; }

@keyframes sca {
    0%, 10%, 60%, 70%{
        opacity: 0;
        transform: scale(.5) translateZ(0vw) ;
    }
    20%, 30%, 80%, 90%{
        opacity: .75;
        transform: scale(1.5) translateZ(2.5vw) ;
    }
    35%, 40%, 100%{
        opacity: .95;
        transform: scale(.75) translateZ(0vw) ;
    }
    45%, 50%{
        opacity: .5;
        transform: scale(1) translateZ(3vw) ;
    }
}

@keyframes radio {
    0%, 10%{
        transform:
            perspective(20000px)
            rotateX(60deg)
            rotateZ(45deg)
            translateZ(-7vw)
            scale(.8)
        ;
    }
    20%, 30%{
        transform:
            perspective(20000px)
            rotateX(60deg)
            rotateZ(45deg)
            translateZ(-6.9vw)
            scale(.8)
        ;
    }
    35%, 40%{
        transform:
            perspective(20000px)
            rotateX(60deg)
            rotateZ(45deg)
            translateZ(-7vw)
            scale(.8)
        ;
    }
    45%, 50%{
        transform:
            perspective(20000px)
            rotateX(60deg)
            rotateZ(45deg)
            translateZ(-6.9vw)
            scale(.8)
        ;
    }
}
@keyframes shadows {
    0%, 10%{ transform: scaleY(1); }
    20%, 30%{ transform: scaleY(.99); }
    35%, 40%{ transform: scaleY(1); }
    45%, 50%{ transform: scaleY(.99); }
}
@keyframes shadowsb {
    0%, 10%{
        width: 28vw;
        height: 22vw;
    }
    20%, 30%{
        width: 27.9vw;
        height: 21.9vw;
    }
    35%, 40%{
        width: 28vw;
        height: 22vw;
    }
    45%, 50%{
        width: 27.9vw;
        height: 21.9vw;
    }
}
@keyframes disc {
    to{ transform:  translateZ(.5vw) rotateZ(1turn); }
}
@keyframes control {
    0%, 10%, 100%{ top: 2vw; }
    20%, 25%{ top: 1vw; }
    30%, 60%{ top: 2vw; }
    65%, 70%{ top: 3.5vw; }
    70%, 90%{ top: 4.5vw; }
    95%{ top: .5vw; }
}

View Compiled

let b = document.body;
let a = document.querySelector("#audio");


let radio = document.querySelector("#radio")
let playert = document.querySelector("#playert")
let disc = document.querySelector("#disc")
let control = document.querySelector("#control")
let needle = document.querySelector("#needle")
let shadows = document.querySelector("#shadows")
let shadowsb = document.querySelector("#shadowsb")
let shadowsc = document.querySelector("#shadowsc")
let text = document.querySelector("#text")

let sca = document.querySelectorAll(".speaker-ca");
let scb = document.querySelectorAll(".speaker-cb");


let sfa = document.querySelectorAll(".speaker__front");
let sta = document.querySelectorAll(".speaker__top");
let sba = document.querySelectorAll(".speaker__back");
let sla = document.querySelectorAll(".speaker__left");
let sra = document.querySelectorAll(".speaker__right");

/*******************/

let tf = () => {
    radio.classList.toggle('is-radio-active')
    playert.classList.toggle('is-playert-active')
    disc.classList.toggle('is-disc-active')
    control.classList.toggle('is-control-active')
    needle.classList.toggle('is-needle-active')
    shadows.classList.toggle('is-shadows-active')
    shadowsb.classList.toggle('is-shadowsb-active')
    shadowsc.classList.toggle('is-shadowsc-active')

    sca.forEach( f => f.classList.toggle("is-sca-active") );
    scb.forEach( f => f.classList.toggle("is-scb-active") );


    sfa.forEach( f => f.classList.toggle("sfa") );
    sta.forEach( f => f.classList.toggle("sta") );
    sba.forEach( f => f.classList.toggle("sba") );
    sla.forEach( f => f.classList.toggle("sla") );
    sra.forEach( f => f.classList.toggle("sra") );
}

let af = () => {
    a.loop = true;

    if (a.paused) a.play();
    else {
        a.pause();
        a.currentTime = 0;
    }

}


let radioPlaying = () => {
    b.removeEventListener("click", radioPlaying)
    text.classList.toggle('is-text-active')
    tf()

    setTimeout(function(){
        af()
    }, 1000);

    setTimeout(function(){
        tf()
        af()
    }, 50000);
    setTimeout(function(){
        text.classList.toggle('is-text-active')
        b.addEventListener("click", radioPlaying)
    }, 14500);


}

/*******************/
b.addEventListener("click", radioPlaying)

This Pen is owned by DivDev on CodePen.

See more by @krautgti on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.