Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                audio#audio
    source(src="https://raw.githubusercontent.com/ricardoolivaalonso/Codepen/master/pokecenter/song.mp3",type="audio/mpeg")
div.orejas#orejas
    div.oreja-l#oreja-l
    div.oreja-r#oreja-r
div.pokecenter#pokecenter
    div.onda#onda
    div.arbustos
        div.arbusto.flex.face
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
        div.arbusto.flex.face
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face   
        div.arbusto.flex.face
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face 
            div.arbusto-el.flex.face
                div.arbusto-el__front.face 
                div.arbusto-el__back.face 
                div.arbusto-el__right.face 
                div.arbusto-el__left.face 
                div.arbusto-el__top.face 
                div.arbusto-el__bottom.face   
        div.cola.cola-t#cola
            div.cola__front.cola-t.face 
            div.cola__back.cola-t.face 
            div.cola__right.cola-t.face 
            div.cola__left.cola-t.face 
            div.cola__top.cola-t.face 
            div.cola__bottom.cola-t.face     
    div.container
        div.shadows
            div.shadow-a
            div.shadow-b
        div.base-a
            div.base-a__front.face 
                div.base-a__line    
            div.base-a__back.face 
                div.base-a__line        
            div.base-a__right.face 
            div.base-a__left.face 
            div.base-a__top.face 
            div.base-a__bottom.face 
        div.base-b
            div.base-b__front.face 
                div.base-b__logo.face 
            div.base-b__back.face 
            div.base-b__right.face 
            div.base-b__left.face 
            div.base-b__top.face 
                div.base-b__techo.face 
            div.base-b__bottom.face 
        div.ventana-a
            div.ventana-a__front.face 
            div.ventana-a__back.face 
            div.ventana-a__right.face 
            div.ventana-a__left.face 
            div.ventana-a__top.face 
            div.ventana-a__bottom.face 
        div.ventana-b
            div.ventana-b__front.face 
            div.ventana-b__back.face 
            div.ventana-b__right.face 
            div.ventana-b__left.face 
            div.ventana-b__top.face 
            div.ventana-b__bottom.face     
        div.wheel.flex.face
            div.wheel-el.flex.face
                div.wheel-el__front.face 
                div.wheel-el__back.face 
                div.wheel-el__right.face 
                div.wheel-el__left.face 
                div.wheel-el__top.face 
                div.wheel-el__bottom.face 
            div.wheel-el.flex.face
                div.wheel-el__front.face 
                div.wheel-el__back.face 
                div.wheel-el__right.face 
                div.wheel-el__left.face 
                div.wheel-el__top.face 
                div.wheel-el__bottom.face 
            div.wheel-el.flex.face
                div.wheel-el__front.face 
                div.wheel-el__back.face 
                div.wheel-el__right.face 
                div.wheel-el__left.face 
                div.wheel-el__top.face 
                div.wheel-el__bottom.face 
            div.wheel-el.flex.face
                div.wheel-el__front.face 
                div.wheel-el__back.face 
                div.wheel-el__right.face 
                div.wheel-el__left.face 
                div.wheel-el__top.face 
                div.wheel-el__bottom.face
        div.wheel-shadow
        div.puerta
            div.puerta-a
                div.puerta-a__front.face 
                div.puerta-a__back.face 
                div.puerta-a__right.face 
                div.puerta-a__left.face 
                div.puerta-a__top.face 
                div.puerta-a__bottom.face 
            div.puerta-b
                div.puerta-b__front.face 
                div.puerta-b__back.face 
                div.puerta-b__right.face 
                div.puerta-b__left.face 
                div.puerta-b__top.face 
                div.puerta-b__bottom.face 
            div.puerta-c
                div.puerta-c__front.face 
                div.puerta-c__back.face 
                div.puerta-c__right.face 
                div.puerta-c__left.face 
                div.puerta-c__top.face 
                div.puerta-c__bottom.face 
            div.puerta-d
                div.puerta-d__front.face 
                div.puerta-d__back.face 
                div.puerta-d__right.face 
                div.puerta-d__left.face 
                div.puerta-d__top.face 
                div.puerta-d__bottom.face 
    
              
            
!

CSS

              
                :root{
    --red-1: hsl(4, 96%, 66%);
    --red-2: hsl(4, 96%, 65%);
    --red-3: hsl(4, 96%, 60%);
    --red-4: hsl(4, 96%, 55%);
    --red-5: hsl(4, 96%, 50%);

    --white-1: #FBFFFE;
    --white-2: #e6edeb;
    --white-3: #e7e7e7;
    --white-4: #dadbdb;
    --white-5: #d0d0d0;

    --brown-1: hsl(10, 44%, 67%);
    --brown-2: hsl(10, 44%, 62%);
    --brown-3: hsl(10, 44%, 57%);

    --gray-1: hsl(174, 13%, 51%);
    --gray-2: hsl(174, 13%, 47%);
    --gray-3: hsl(174, 13%, 44%);
    --gray-4: hsl(174, 13%, 40%);
    --gray-5: hsl(174, 13%, 35%);
    --gray-6: hsl(174, 13%, 20%);

    --green-1: hsl(148, 100%, 82%);
    --green-f: hsl(148, 100%, 75%);
    --green-2: hsl(148, 100%, 72%);
    --green-3: hsl(148, 70%, 65%);
    --green-4: hsl(148, 30%, 50%);

    --blue-1: hsl(185, 59%, 68%);
    --blue-2: hsl(185, 59%, 38%);

    --yellow-1: hsl(42, 86%, 60%);
    --yellow-2: hsl(43, 77%, 55%);
    --yellow-3: hsl(44, 67%, 50%);
}

/***********************/
/***********************/
@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 para crear rueda */
/************************/
@mixin wheel($width-el, $height-el, $depth-el) {
    width: $width-el;
    height: $height-el;
    &__front{
        width: $width-el * .425;
        height: $depth-el;
        transform: rotateX(-90deg) translateZ($height-el / 2);
    }
    &__back{
        width: $width-el * .425;
        height: $depth-el;
        transform: rotateX( 90deg) translateZ($height-el / 2);
    }
    &__top{
        width: $width-el * .425;
        height: $height-el ;
        transform: rotateY(0deg) translateZ($depth-el / 2);
    }
    &__bottom{
        width: $width-el * .425;
        height: $height-el;
        transform: rotateY(180deg) translateZ($depth-el / 2);
    }
    &__right{
        width: $depth-el ;
        height: $height-el ;
        transform: rotateY(90deg) translateZ($width-el / 5.1);
    }
    &__left{
        width: $depth-el;
        height: $height-el;
        transform: rotateY(90deg) translateZ(-$width-el / 5.1);
    }

    &:nth-of-type(2){ transform: rotateZ(45deg); }
    &:nth-of-type(3){ transform: rotateZ(90deg); }
    &:nth-of-type(4){ transform: rotateZ(135deg); }
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {

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

    @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;
    background-color: var(--green-1);
	cursor: pointer;
    transition: .1s;
}

.face{ position: absolute; }
/* CUBECENTER */
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
/***************/
.pokecenter{
    display: flex;
    justify-content: center;
    align-items: center;

	position: absolute;
    width: 50vw;
    height: 50vw;

	transform:
		perspective(10000px)
		rotateX(66deg)
		rotateZ(35deg)
		translateZ(-8vw)
	;
    background-color: var(--green-f);
    box-shadow:
        1vw 1vw 2vw var(--green-f),
        -1vw 1vw 2vw var(--green-f),
        1vw -1vw 2vw var(--green-f),
        -1vw -1vw 2vw var(--green-f);
    border-radius: 50%;
}
.container{
    width: 25vw;
    height: 20vw;
}
.shadow-a{
    position: absolute;
    top: 1vw;
    right: -.5vw;
    width: 32vw;
    height: 25vw;
    filter: blur(.5vw);

    background-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent 2.5vw,
            var(--green-3) 2.5vw,
            var(--green-3) 29.5vw,
            transparent 29.5vw,
            transparent 32vw
        );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 2.5vw;
        }
        &::before{
            left: 0;
            background-image:
                linear-gradient(44deg, transparent 1.65vw, var(--green-3) 1.65vw),
                linear-gradient(-44deg, var(--green-3) 9.25vw, transparent 9.25vw);
            background-size: 100% 50%, 100% 50%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }
        &::after{
            right: 0;
            background-image:
                linear-gradient(-44deg, transparent 1.65vw, var(--green-3) 1.65vw),
                linear-gradient(44deg, var(--green-3) 9.25vw, transparent 9.25vw);
            background-size: 100% 50%, 100% 50%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }

}
.shadow-b{
    position: absolute;
    width: 26vw;
    height: 21vw;
    top: 0;
    right: 0;
    filter: blur(.5vw);

    background-image:
        linear-gradient(
            to right,
            transparent 0,
            transparent 2.5vw,
            var(--green-4) 2.5vw,
            var(--green-4) 23.5vw,
            transparent 23.5vw,
            transparent 26vw
        );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 2.5vw;
        }
        &::before{
            left: 0;
            background-image:
                linear-gradient(44deg, transparent 1.65vw, var(--green-4) 1.65vw),
                linear-gradient(-44deg, var(--green-4) 7.5vw, transparent 7.5vw);
            background-size: 100% 50%, 100% 50%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }
        &::after{
            right: 0;
            background-image:
                linear-gradient(-44deg, transparent 1.65vw, var(--green-4) 1.65vw),
                linear-gradient(44deg, var(--green-4) 7.5vw, transparent 7.5vw);
            background-size: 100% 50%, 100% 50%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }

}
/***************/
.base-a{
    $width-el: 25vw;
    $height-el: 14vw;
    $depth-el: 10vw;

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

    width: 25vw;
    height: 20vw;
    position: absolute;

    &__front{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--white-4) 2.5vw,
                var(--white-4) 22.5vw,
                transparent 22.5vw,
                transparent 25vw
            )
        ;
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 3.7vw;
        }
        &::before{
            left: -1vw;
            background-color: var(--white-5);
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-5) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-5) 3vw,
                    var(--gray-5) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-5) 4vw,
                    var(--gray-5) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
            transform-origin: bottom right;
            transform: rotateY(-44deg);
        }
        &::after{
            right: -1vw;
            background-color: var(--white-3);
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-3) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-3) 3vw,
                    var(--gray-3) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-3) 4vw,
                    var(--gray-3) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
            transform-origin: bottom left;
            transform: rotateY(44deg);
        }
        .base-a__line{
            position: absolute;
            bottom: 0;
            left: 2.5vw;
            width: calc(100% - 5vw);
            height: 100%;
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-4) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-4) 3vw,
                    var(--gray-4) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-4) 4vw,
                    var(--gray-4) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
        }
    }
    &__back{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--white-1) 2.5vw,
                var(--white-1) 22.5vw,
                transparent 22.5vw,
                transparent 25vw
            );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 3.7vw;
        }
        &::before{
            left: -1vw;
            background-color: var(--white-1);
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-1) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-1) 3vw,
                    var(--gray-1) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-1) 4vw,
                    var(--gray-1) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
            transform-origin: bottom right;
            transform: rotateY(-44deg);
        }
        &::after{
            right: -1vw;
            background-color: var(--white-2);
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-2) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-2) 3vw,
                    var(--gray-2) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-2) 4vw,
                    var(--gray-2) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
            transform-origin: bottom left;
            transform: rotateY(44deg);
        }
        .base-a__line{
            position: absolute;
            bottom: 0;
            left: 2.5vw;
            width: calc(100% - 5vw);
            height: 100%;
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-1) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-1) 3vw,
                    var(--gray-1) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-1) 4vw,
                    var(--gray-1) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
        }
    }
    &__right{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--white-1) 2.5vw,
                var(--white-1) 17.5vw,
                transparent 17.5vw,
                transparent 20vw
            );
        &::before{
            content: '';
            position: absolute;
            bottom: 0;
            left: 2.5vw;
            width: calc(100% - 5vw);
            height: 100%;
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-1) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-1) 3vw,
                    var(--gray-1) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-1) 4vw,
                    var(--gray-1) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
        }
    }
    &__left{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--white-5) 2.5vw,
                var(--white-5) 17.5vw,
                transparent 17.5vw,
                transparent 20vw
            );

        &::before{
            content: '';
            position: absolute;
            bottom: 0;
            left: 2.5vw;
            width: calc(100% - 5vw);
            height: 100%;
            background-image:
                linear-gradient(
                    to top,
                    var(--gray-5) 1vw,
                    transparent 1vw,
                    transparent 3vw,
                    var(--gray-5) 3vw,
                    var(--gray-5) 3.1vw,
                    transparent 3.1vw,
                    transparent 4vw,
                    var(--gray-5) 4vw,
                    var(--gray-5) 4.1vw,
                    transparent 4.1vw,
                    transparent 13vw,
                    var(--gray-3)
                );
        }
    }
    &__top{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--white-3) 2.5vw,
                var(--white-3) 22.5vw,
                transparent 22.5vw,
                transparent 25vw
            );
            &::before,
            &::after{
                content: '';
                position: absolute;
                height: 100%;
                width: 2.5vw;
            }
            &::before{
                left: 0;
                background-image:
                    linear-gradient(44deg, transparent 1.65vw, var(--white-3) 1.65vw),
                    linear-gradient(-44deg, var(--white-3) 7.25vw, transparent 7.25vw);
                background-size: 100% 50%, 100% 50%;
                background-position: bottom, top;
                background-repeat: no-repeat;
            }
            &::after{
                right: .1vw;
                background-image:
                    linear-gradient(-44deg, transparent 1.65vw, var(--white-3) 1.65vw),
                    linear-gradient(44deg, var(--white-3) 7.25vw, transparent 7.25vw);
                background-size: 100% 50%, 100% 50%;
                background-position: bottom, top;
                background-repeat: no-repeat;
            }
    }
}
/***************/
.base-b{
    $width-el: 26vw;
    $height-el: 3vw;
    $depth-el: 10.5vw;

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


    top: -.5vw;
    left: -.5vw;
    width: 26vw;
    height: 21vw;
    position: absolute;

    transform: translateZ(14vw);

    &__front{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--red-4) 2.5vw,
                var(--red-4) 23.5vw,
                transparent 23.5vw,
                transparent 26vw
            );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 3.7vw;
        }
        &::before{
            left: -1vw;
            background-color: var(--red-5);
            transform-origin: bottom right;
            transform: rotateY(-44deg);
        }
        &::after{
            right: -1vw;
            background-color: var(--red-3);
            transform-origin: bottom left;
            transform: rotateY(44deg);
        }

        .base-b__logo{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 2.5vw;
            height: 2.5vw;
            background-image:
                linear-gradient(
                    var(--white-1) 46%,
                    var(--red-4) 46%,
                    var(--red-4) 54%,
                    var(--white-1) 54%
                );
            border-radius: 50%;

            &::before{
                content: '';
                position: absolute;
                width: 50%;
                height: 50%;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                border: .15vw solid var(--red-4);
                border-radius: 50%;
            }
        }
    }
    &__back{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--red-1) 2.5vw,
                var(--red-1) 23.5vw,
                transparent 23.5vw,
                transparent 26vw
            );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 3.7vw;
        }
        &::before{
            left: -1vw;
            background-color: var(--red-1);
            transform-origin: bottom right;
            transform: rotateY(-44deg);
        }
        &::after{
            right: -1vw;
            background-color: var(--red-2);
            transform-origin: bottom left;
            transform: rotateY(44deg);
        }
    }
    &__right{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--red-1) 2.5vw,
                var(--red-1) 18.5vw,
                transparent 18.5vw,
                transparent 21vw
            );
    }
    &__left{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--red-5) 2.5vw,
                var(--red-5) 18.5vw,
                transparent 18.5vw,
                transparent 21vw
            );
    }
    &__top{
        background-image:
            linear-gradient(
                to right,
                transparent 0,
                transparent 2.5vw,
                var(--red-3) 2.5vw,
                var(--red-3) 23.5vw,
                transparent 23.5vw,
                transparent 26vw
            );
        &::before,
        &::after{
            content: '';
            position: absolute;
            height: 100%;
            width: 2.5vw;
        }
        &::before{
            left: 0;
            background-image:
                linear-gradient(44deg, transparent 1.65vw, var(--red-3) 1.65vw),
                linear-gradient(-44deg, var(--red-3) 7.55vw, transparent 7.55vw);
            background-size: 100% 50%, 100% 50%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }
        &::after{
            right: 0;
            background-image:
                linear-gradient(-44deg, transparent 1.65vw, var(--red-3) 1.65vw),
                linear-gradient(44deg, var(--red-3) 7.55vw, transparent 7.55vw);
            background-size: 100% 50%, 100% 51%;
            background-position: bottom, top;
            background-repeat: no-repeat;
        }

        .base-b__techo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 80%;
            height: 75%;
            background-color: var(--white-1);
            border: .125vw solid var(--red-5);
            border-radius: 3vw;
        }
    }
}

.ventana-a,
.ventana-b{
    $width-el: .75vw;
    $height-el: 5vw;
    $depth-el: 4vw;

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

    width: .75vw;
    height: 8vw;
    position: absolute;
    bottom: 6vw;
    transform: translateZ(5vw);

    &__front{ background-color: var(--red-4); }
    &__back{ background-color: var(--red-1); }
    &__left{ background-color: var(--red-5); }
    &__right{ background-color: var(--red-2); }
    &__top{ background-color: var(--red-3); }
    &__bottom{ background-color: var(--red-5); }
}
.ventana-a{
    left: 100.1%;
    &__left{
        &::before{
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 140%;
            background-color: var(--gray-1);
            opacity: .5;
            filter: blur(.5vw);

        }
    }
}
.ventana-b{
    right: 100.3%;
    &__right{
        &::before{
            content: '';
            position: absolute;
            top: 0;
            width: 100%;
            height: 140%;
            background-color: var(--gray-1);
            opacity: .4;
            filter: blur(.5vw);
        }
    }
}
.wheel{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%) translateZ(16vw) rotateX(90deg) rotateZ(22.5deg);

    &-el{
        $width: 10vw;
        $height: $width;
        $depth: 10vw;
        @include wheel($width, $height, $depth);
        &__front{ background-color: var(--red-4); }
        &__back{ background-color: var(--red-3);  }
        &__right{ background-color: transparent;  }
        &__left{ background-color: transparent;  }
        &__top{ background-color: var(--red-1);  }
        &__bottom{ background-image: radial-gradient(circle,  var(--white-4) 70%, var(--red-5) 70%); }
    }
    &-shadow{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12vw;
        height: 12vw;
        transform: translateY(-50%) translateX(-50%) translateZ(17vw);
        background-color: var(--white-5);
        opacity: 1;
        filter: blur(.35vw);
    }
}
.puerta{
    width: 8vw;
    height: 1vw;
    position: absolute;
    bottom: -1.1vw;
    left: 50%;
    transform: translateX(-50%);

    &-a,
    &-b{
        $width-el: 1vw;
        $height-el: 12vw;
        $depth-el: .25vw;

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

        width: .5vw;
        height: 1vw;
        position: absolute;

        &__front{ background-color: var(--red-4); }
        &__back{ background-color: var(--red-1); }
        &__left{ background-color: var(--red-5); }
        &__right{ background-color: var(--red-2); }
        &__top{ background-color: var(--red-3); }
        &__bottom{ background-color: var(--red-5); }
    }
    &-a{ left: 0; }
    &-b{ right: 0; }

    &-c,
    &-d{
        $width-el: 7vw;
        $height-el: 1vw;
        $depth-el: .25vw;

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

        width: .5vw;
        height: 1vw;
        left: 1vw;
        position: absolute;

        &__front{ background-color: var(--red-4); }
        &__back{ background-color: var(--red-1); }
        &__left{ background-color: var(--red-5); }
        &__right{ background-color: var(--red-2); }
        &__top{ background-color: var(--red-3); }
        &__bottom{ background-color: var(--red-5); }
    }
    &-c{
        bottom: 0;
        .puerta-c__back{
            &::before{
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 8vw;
                height: 12vw;
                background-image:
                    linear-gradient(
                        to left,
                        var(--blue-1) 47%,
                        var(--gray-6) 47%,
                        var(--gray-6) 53%,
                        var(--blue-1) 53%
                    );
                box-shadow:
                    inset .75vw .75vw 1.5vw var(--blue-2),
                    inset -.75vw .75vw 1.5vw var(--blue-2),
                    inset .75vw -.75vw 1.5vw var(--blue-2),
                    inset -.75vw -.75vw 1.5vw var(--blue-2)
                ;
            }
        }
    }
    &-d{ transform: translateZ(11vw); }
}
.arbustos{
    width: 100%;
    height: 100%;
    position: absolute;
}
.arbusto{
    position: absolute;
    transform: translateZ(.1vw);
    width: 4vw;
    height: 4vw;

    &::before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5vw;
        height: 5vw;
        background-color: var(--green-3);
        border-radius: 50%;
        filter: blur(.25vw);
    }

    &:nth-of-type(1){ top: 50%; left: calc(100% - 4vw); }
    &:nth-of-type(2){
        bottom: 30%; left: 5vw;
        &::before{ background-color: var(--green-4); opacity: .5;}
    }
    &:nth-of-type(3){
        bottom: 15%; left: 16vw;
        &::before{ background-color: var(--green-4); opacity: .5;}
    }

    &-el{
        $width: 4vw;
        $height: $width;
        $depth: .5vw;
        @include wheel($width, $height, $depth);
        &__front{ background-color: var(--white-5); }
        &__back{ background-color: var(--white-4);  }
        &__right{ background-color: var(--white-4);  }
        &__left{ background-color: var(--white-4);  }
        &__top{ background-color: var(--white-3);  }
        &__bottom{ background-color: var(--white-5);  }
    }
}

.cola{
    $width-el: .75vw;
    $height-el: 1.5vw;
    $depth-el: .125vw;

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

    width: .75vw;
    height: .25vw;
    position: absolute;
    bottom: 30vw;
    right: 29vw;

    transform: rotateY(25deg) translateZ(20vw);

    animation: cola .5s ease-in-out infinite alternate;

    &__front{
        background-color: var(--yellow-3);
        border-top: .65vw solid var(--gray-6);
    }
    &__back{
        background-color: var(--yellow-2);
        border-top: .65vw solid var(--gray-6);
     }
    &__right{
        background-color: var(--yellow-2);
        border-top: .65vw solid var(--gray-6);
     }
    &__left{
        background-color: var(--yellow-2);
        border-top: .65vw solid var(--gray-6);
     }
    &__top{ background-color: var(--gray-6);  }
    &__bottom{ background-color: var(--yellow-3);  }
}

.orejas{
    width: 100%;
    height: 100%;
    top: 100%;
    position: absolute;
    transform: translateZ(20000px);
}
.oreja-l,
.oreja-r{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;

    width: 10vw;
    height: 10vw;
    border: .2vw solid black;
    background-color: black;
    bottom: -5vw;

    border-radius: 100% 0% 100% 0% / 100% 0% 100% 0%;
    overflow: hidden;

    &::before{
        content: '';
        position: absolute;
        height: 80%;
        width: 100%;
        right: 15%;
        bottom: 20%;
        border-radius: 50%;
        background-color: #F7D525;
        transform: rotateZ(50deg);
    }
}
.oreja-l{
    transform: translateZ(20000px) rotateZ(-60deg);
    left: 5vw;
    &::before{
        left: 15%;
        bottom: -5%;
    }
}
.oreja-r{
    transform: translateZ(20000px) rotateZ(-30deg);
    left: 14vw;
    &::before{
        right: 15%;
        bottom: 20%;
    }
}

.onda{
    position: absolute;
    width: 5vw;
    height: 5vw;
    background-color: rgba(255, 255, 255, .075);
    border: 1vw solid rgba(255, 255, 255, .125);
    border-radius: 50%;
    transform: translateZ(.2vw);
}

.ani-onda{
    animation-name: onda;
    animation-duration: .5s;
    animation-iteration-count: 5;
    animation-timing-function: cubic-bezier(.17,.67,.83,.67);
    animation-delay: 1.25s;
}
@keyframes onda {
    to{ width: 50vw; height: 50vw; }
}

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

.ani-pokecenter{
    animation-name: pokecenter;
    animation-duration: .1s;
    animation-iteration-count: 24;
    animation-timing-function: cubic-bezier(.17,.67,.83,.67);
    animation-delay: 1.25s;
}
.is-hidden{ display: none; }
.ani-orejas{ animation: orejas 3.9s ease .5s; }
.ani-oreja-r{ animation: oreja-r .1s ease infinite reverse; }
.ani-oreja-l{ animation: oreja-l .1s ease infinite; }
@keyframes orejas {
    0%, 100%{ top: 100%; }
    5%, 90%{ top: 0%; }
}
@keyframes oreja-l { to{ transform: translateZ(20000px) rotateZ(-55deg); } }
@keyframes oreja-r { to{ transform: translateZ(20000px) rotateZ(-35deg); } }
@keyframes pokecenter {
    to{
        transform:
    		perspective(3800px)
    		rotateX(66deg)
    		rotateZ(35deg)
    		translateZ(-8.1vw)
        ;
    }
}
@keyframes cola {
    to{
        transform-origin: right;
        transform: rotateY(25deg) translateZ(20vw);
    }
}

              
            
!

JS

              
                /*
		Designed by: Vic Bell
		Original image: https://dribbble.com/shots/3996502-Pokecenter
*/


const pokecenter = document.querySelector("#pokecenter");
const colaT = document.querySelectorAll(".cola-t");
const cola = document.querySelector("#cola");
const orejas = document.querySelector("#orejas");
const orejaL = document.querySelector("#oreja-l");
const orejaR = document.querySelector("#oreja-r");
const onda = document.querySelector("#onda");
const a = document.querySelector("#audio");
const b = document.body;

let base = (e) => {
    var x = e.pageX / window.innerWidth - 0.5;
    var y = e.pageY / window.innerHeight - 0.5;
    pokecenter.style.transform = `
        perspective(20000px)
        rotateX(${ y * 10  + 66}deg)
        rotateZ(${ -x * 10  + 35}deg)
        translateZ(-8vw)
    `;
}

let picaFun = (e) => {
    pokecenter.classList.add("ani-pokecenter");
    orejas.classList.add("ani-orejas");
    orejaL.classList.add("ani-oreja-l");
    cola.classList.add("is-hidden");
    orejaR.classList.add("ani-oreja-r");
    onda.classList.add("ani-onda");
    b.removeEventListener("pointermove", base);

    a.loop = false;
    if (a.paused) a.play();

    setTimeout( () =>  {
        pokecenter.classList.remove("ani-pokecenter");
        cola.classList.remove("is-hidden");
        orejas.classList.remove("ani-orejas");
        orejaL.classList.remove("ani-oreja-l");
        orejaR.classList.remove("ani-oreja-r");
        onda.classList.remove("ani-onda");
        b.addEventListener("pointermove", base);

        a.pause();
        a.currentTime = 0;
    } , 6000);
}

b.addEventListener("pointermove", base);
colaT.forEach( c => c.addEventListener('click', picaFun) );

              
            
!
999px

Console