r2d2.css

/* Reset ----------------------------------------------------------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* Plantilla ----------------------------------------------------------------------------------------------------------------------------- */
:root {
    /* comunes */
    --borde:8px solid var(--oscuro);
    --oscuro: #182F3D;
    /* R2D2 */
    --rojo: #FF0000; /* botón cabeza */
    --azul:#3366FF; /* detalles color propio */
    --medio: #2D5873; /* Fondo ojo y cámara */
    --gris-claro: #EBF2FA; /* brillos */
    --gris-medio: #C3DEEE; /* base */
    --gris-oscuro: #A6D0E1; /* contraste */
    /* Pasillo */
    --granate: #73141b;
    --blanco: #f2f2f2;
    --gris1: #bfbfbf;
    --gris2: #8c8c8c;
    --gris3: #595959;
    --sombra: #404040;
    --negro: #0d0d0d;
}


.body {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Fondo ----------------------------------------------------------------------------------------------------------------------------- */
/* Escena */
.limiteEscena {
    /* Posición */
    position: absolute;
    top: 0;
    z-index:0;
    /* Atributos */
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: var(--gris1);
}

/* Cubo */
.escenario {
    /* Posición */
    margin-top: 300px;
    /* Atributos */
    transform-style: preserve-3d;
    transform: perspective(50px);
    perspective-origin: left;
    font-size: 4em;
}

.lado {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: calc(50% - 200px);
    top: calc(50% - 200px);  
    /* Atributos */
    width: 400px;
    height: 400px;
    text-align: center;
    line-height: 2em;
}

.lado.techo{
    transform: rotateX(90deg)
                translateZ(200px);
    background-color: var(--blanco);
}

.lado.techo::before {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 0;
    height: 100vh;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: white;
}

.lado.izq {
    transform: rotateY(-90deg)
                translateZ(200px);
    background-color: var(--gris1);
    box-shadow:  25px 25px 50px var(--blanco) inset ;
}
.lado.dcha {
    transform: rotateY(90deg)
                translateZ(200px);
    background-color: var(--gris1);
    box-shadow:  50px 50px 50px var(--blanco) inset ;
}
.lado.suelo {
    transform: rotateX(-90deg)
                translateZ(200px);
    background-color: var(--gris3);
}

.lado.fondo:nth-child(2) {
    /* Posición */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    width: 300px;
    height: 350px;
    margin: 50px 50px 0;
    transform: rotateY(-180deg)
                translateZ(200px);
    background-color: var(--blanco);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-color: var(--gris2);
    border-width: 25px;
    border-style: solid;
    overflow: hidden;
}
.lado.fondo:nth-child(2)::before {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 270px;
    height: 320px;
    background-color: var(--gris1);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    /* Animación */
    animation-name: abrirPuerta;
    animation-duration: 10s;
    animation-iteration-count: 1;
}

.lado.fondo:nth-child(2)::after {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 200px;
    height: 250px;
    background-color: var(--gris1);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    border-color: var(--gris2);
    border-width: 5px;
    border-style: solid;
    /* Animación */
    animation-name: abrirPuerta;
    animation-duration: 10s;
    animation-iteration-count: 1;
}

.lado.fondo:nth-child(3) {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 400' style='enable-background:new 0 0 400 400;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D .st1%7Bfill:%238C8C8C;%7D .st2%7Bfill:%23BFBFBF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M165,200L94.1,25H50c-13.8,0-25,11.2-25,25v300c0,13.8,11.2,25,25,25h44.1L165,200L165,200z'/%3E%3Cpath class='st0' d='M375,350V50c0-13.8-11.2-25-25-25h-44.1L235,200l0,0l70.9,175H350C363.8,375,375,363.8,375,350z'/%3E%3Cpath class='st1' d='M50,375c-13.8,0-25-11.2-25-25V50c0-13.8,11.2-25,25-25h44.1L84,0H50C22.4,0,0,22.4,0,50v300 c0,27.6,22.4,50,50,50h33.9L94,375H50z'/%3E%3Cpath class='st1' d='M350,25c13.8,0,25,11.2,25,25v300c0,13.8-11.2,25-25,25h-44.1l10.1,25h34c27.6,0,50-22.4,50-50V50 c0-27.6-22.4-50-50-50h-33.9L306,25H350z'/%3E%3Cg%3E%3Cpolygon class='st1' points='305.9,13 316.1,0 83.9,0 94.1,13 '/%3E%3C/g%3E%3Cg%3E%3Cpolygon class='st1' points='305.9,387 94.1,387 83.9,400 316.1,400 '/%3E%3C/g%3E%3Cpath class='st1' d='M94,25'/%3E%3Cpolygon class='st2' points='94,25 94,13 84,0 '/%3E%3Cpolygon class='st2' points='306,25 316,0 306,13 '/%3E%3Cpolygon class='st2' points='84,400 94,375 94,387 '/%3E%3Cpolygon class='st2' points='306,375 306,387 316,400 '/%3E%3C/g%3E%3C/svg%3E%0A");    
    background-size: cover;
    transform: translateZ(-70px);
}
.lado.fondo:nth-child(4) {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 400 400' style='enable-background:new 0 0 400 400;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D .st1%7Bfill:%238C8C8C;%7D .st2%7Bfill:%23BFBFBF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M165,200L94.1,25H50c-13.8,0-25,11.2-25,25v300c0,13.8,11.2,25,25,25h44.1L165,200L165,200z'/%3E%3Cpath class='st0' d='M375,350V50c0-13.8-11.2-25-25-25h-44.1L235,200l0,0l70.9,175H350C363.8,375,375,363.8,375,350z'/%3E%3Cpath class='st1' d='M50,375c-13.8,0-25-11.2-25-25V50c0-13.8,11.2-25,25-25h44.1L84,0H50C22.4,0,0,22.4,0,50v300 c0,27.6,22.4,50,50,50h33.9L94,375H50z'/%3E%3Cpath class='st1' d='M350,25c13.8,0,25,11.2,25,25v300c0,13.8-11.2,25-25,25h-44.1l10.1,25h34c27.6,0,50-22.4,50-50V50 c0-27.6-22.4-50-50-50h-33.9L306,25H350z'/%3E%3Cg%3E%3Cpolygon class='st1' points='305.9,13 316.1,0 83.9,0 94.1,13 '/%3E%3C/g%3E%3Cg%3E%3Cpolygon class='st1' points='305.9,387 94.1,387 83.9,400 316.1,400 '/%3E%3C/g%3E%3Cpath class='st1' d='M94,25'/%3E%3Cpolygon class='st2' points='94,25 94,13 84,0 '/%3E%3Cpolygon class='st2' points='306,25 316,0 306,13 '/%3E%3Cpolygon class='st2' points='84,400 94,375 94,387 '/%3E%3Cpolygon class='st2' points='306,375 306,387 316,400 '/%3E%3C/g%3E%3C/svg%3E%0A");    
    background-size: cover;
    transform: translateZ(0px);
}




/* R2D2 ----------------------------------------------------------------------------------------------------------------------------- */
.r2d2 {
    /* Posición */
    position: absolute;
    top: 20%;
    left:calc(50% - 160px);
    z-index: 50;
    /* Atributos */
    width: 320px;
    height: 320px;
    /* Animación */
    animation-name: acercarse;
    animation-duration: 15s;
    animation-direction: initial;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
}

.r2d2::before {
    /* Posición */
    position: absolute;
    top: calc(20% + 360px);
    z-index: 0;
    /* Atributos */
    content: "";
    width: 320px;
    height: 50px;
    background: -webkit-radial-gradient(ellipse, var(--sombra), transparent 80%);
    background: -moz-radial-gradient(ellipse, var(--sombra), transparent 80%);
    background: radial-gradient(ellipse, var(--sombra), transparent 80%);
}

.r2d2 header{
    /* Posición */
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    width: 320px;
    height: 320px;
}

.r2d2 .cabeza {
    /* Posición */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    width: 200px;
    height: 150px;
    overflow: hidden;
    background: linear-gradient( to right, var(--gris-medio) 50%, var(--gris-claro), var(--gris-medio));
    border: var(--borde);
    -moz-border-radius: 200px 200px 0 0;
    -webkit-border-radius: 200px 200px 0 0;
    border-radius: 200px 200px 0 0;
}

.r2d2 .cabeza .fondoAzul{
    /* Posición */
    position: absolute;
    top: 90px;
    z-index: 0;
    /* Atributos */
    width: 50px;
    height: 75px;
    background-color: var(--azul);
    border-radius: 7px;
    transform: perspective(100px) rotateX(40deg);
}

.r2d2 .cabeza .ojo{
    /* Posición */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    /* Atributos */
    width: 40px;
    height: 40px;
    margin: 12% auto auto auto;
    border-radius: 50%;
    background-color: var(--gris-medio);
    border-color: var(--oscuro);
    border-width: 4px;
    border-style: solid;
}

.r2d2 .cabeza .ojo:after {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 20px;
    height: 20px;
    background-color: var(--medio);
    border-radius: 50%;
    border-style: solid;
    border-width: 4px; 
    border-color: var(--oscuro);
}

.r2d2 .cabeza .ojo:before {
    /* Posición */
    position: absolute;
    right: 15%;
    top: 20%;
    /* Atributos */
    content: "";
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
    transform: skewY(30deg);
}

.r2d2 .cabeza .inferior {
    /* Posición */
    position: absolute;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 165px;
    /* Atributos */
    width: 200px;
    height: 60px;
}

.r2d2 .cabeza .inferior::before {
    /* Posición */
    position: absolute;
    right: 17px;
    /* Atributos */
    content: "";
    width: 10px;
    height: 40px;
    background-color: var(--azul);
    border-radius: 7px;
}

.r2d2 .cabeza .inferior .camara {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 5;
    align-items: center;
    left: 65.5%;
    /* Atributos */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--gris-medio);
    border-color: var(--oscuro);
    border-width: 4px;
    border-style: solid;
}

.r2d2 .cabeza .inferior .camara:after {
    /* Posición */
    z-index: 0;
    /* Atributos */
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--medio);
    border-radius: 50%;
    border-style: double;
    border-width: 8px; 
    border-color: var(--oscuro);
}

.r2d2 .cabeza .inferior .boton {
    /* Posición */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 0;
    /* Atributos */
    width: 55px;
    height: 40px;
    background-color: var(--azul);
    border-radius: 7px;
}

.r2d2 .cabeza .inferior .boton::before {
    /* Atributos */
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--rojo);
    border-color: var(--oscuro);
    border-width: 4px;
    border-style: solid;
    /* Animación */
    animation-name: luz;
    animation-delay: 5s;
    animation-duration: 2s;
    animation-iteration-count: 7;
    animation-direction: alternate-reverse;
}

.r2d2 .cabeza .rectangulo {
    /* Posición */
    position: absolute;
    left: 10%;
    /* Atributos */
    width: 20px;
    height: 40px;
    background-color: var(--azul);
    border-radius: 7px;
}

.r2d2 .cabeza .rectangulo::after {
    /* Posición */
    position: absolute;
    left: 120%;
    /* Atributos */
    content: "";
    width: 20px;
    height: 40px;
    background-color: var(--azul);
    border-radius: 7px;
}

/* Cuerpo */
.r2d2 .cuerpo {
    /* Posición */
    top: 230px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    height: 240px;
}

.r2d2 .pata {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    width: 60px;
    height: 100%;
}

.pata.izq{
    left: 0;
}

.pata.dcha {
    right: 0;
}

.pataSup {
    /* Posición */
    top: 20px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
    /* Atributos */
    width: 60px;
    height: 50px;
    border: var(--borde);
    border-radius: 7px;
}

.pata.izq .pataSup {
    background: linear-gradient( to right, var(--azul), var(--gris-medio));
}

.pata.dcha .pataSup {
    background: linear-gradient( to right, var(--gris-medio), var(--azul));
}

.pataSup::before {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 20px;
    height: 60px;
    background-color: var(--gris-claro);
    border: var(--borde);
    border-radius: 7px;
}

.pataSup::after {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 6px;
    height: 80px;
    background: linear-gradient( to right, var(--gris-medio) 40%, var(--gris-claro), var(--gris-medio));
    border-color: var(--oscuro);
    border-width: 4px;
    border-radius: 7px;
    border-style: solid;
}

.pataMed {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -5;
    /* Atributos */
    width: 50%;
    height: 120px;
    background: linear-gradient( to right, var(--gris-medio) 40%, var(--gris-claro), var(--gris-medio));
    border: var(--borde);
}

.pataInf {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    /* Atributos */
    width: 100%;
    height: 80px;
    background-color: var(--oscuro);
    border-radius: 7px;
    transform: perspective(70px) rotateX(40deg);
}


.pataInf::before {
    /* Posición */
    position: absolute;
    z-index: 5;
    top: 5px;
    /* Atributos */
    content: "";
    width: 15px;
    height: 65px;
    background: linear-gradient( to right, var(--gris-medio) 50%, var(--gris-claro), var(--gris-medio));
    border-color: var(--oscuro);
    border-width: 4px;
    border-radius: 7px;
    border-style: solid;
}

.pataInf::after {
    /* Posición */
    top: 10px;
    position: absolute;
    /* Atributos */
    content: "";
    width: 45px;
    height: 65px;
    background-color: var(--gris-claro);
    border-radius: 7px;
}

.tronco {
    /* Posición */
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Atributos */
    width: 200px;
    height: 180px;
    background: linear-gradient( to right, var(--gris-medio) 50%, var(--gris-claro), var(--gris-medio));
    border: var(--borde);
}

.tronco .lateral{
    /* Posición */
    position: absolute;
    /* Atributos */
    width: 20px;
    height: 90%;
    border-color: var(--oscuro);
    border-width: 4px;
    border-radius: 7px;
    border-style: solid;
    background-color: var(--gris-claro);
}

.tronco .lateral:first-child {
    left: 5px;
}

.tronco .lateral:nth-child(2) {
    right: 5px;
}

.tronco .sup {
    /* Posición */
    position: absolute;
    justify-content: center;
    top: 0;
    /* Atributos */
    width: 120px;
    height: 60px;
}

.tronco .sup .banda {
    width: 120px;
    height: 10px;
    background-color: var(--azul);
    margin: 10px auto;
}

.tronco .sup .banda:first-child {
    margin: 0px auto;
}

.tronco .sup .banda:nth-child(2)::before,
.tronco .sup .banda:nth-child(2)::after {
    /* Posición */
    position: absolute;
    left: 70%;
    /* Atributos */
    content: "";
    width: 0;
    height: 0;
}

.tronco .sup .banda:nth-child(2)::before {
    border-right: 6px solid transparent;
    border-top: 3px solid var(--gris-claro);
    border-left: 6px solid transparent;
    border-bottom: 3px solid transparent;
}

.tronco .sup .banda:nth-child(2)::after {
    /* Posición */
    top: 24px;
    /* Atributos */
    border-right: 6px solid transparent;
    border-top: 3px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 3px solid var(--gris-claro);
}

.tronco .sup .banda:nth-child(3)::before,
.tronco .sup .banda:nth-child(3)::after {
    /* Posición */
    position: absolute;
    left: 30%;
    /* Atributos */
    content: "";
    width: 0;
    height: 0;
}

.tronco .sup .banda:nth-child(3)::before {
    border-right: 6px solid transparent;
    border-top: 3px solid var(--gris-medio);
    border-left: 6px solid transparent;
    border-bottom: 3px solid transparent;
}

.tronco .sup .banda:nth-child(3)::after {
    /* Posición */
    top: 44px;
    /* Atributos */
    border-right: 6px solid transparent;
    border-top: 3px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 3px solid var(--gris-medio);
}


.tronco .medio {
    /* Posición */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 60px;
    /* Atributos */
    width: 100%;
    height: 60px;
}

.tronco .medio::before {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 15%;
    height: 100%;
    background-color: var(--azul);
}

.tronco .medio .parte {
    /* Posición */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Atributos */
    width: 15px;
    height: 20px;
    background-color: var(--gris-medio);
    border-radius: 7px;
}

.tronco .medio .parte::before {
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 12px;
    height: 17px;
    border-radius: 7px;
    background: linear-gradient(to bottom, var(--gris-claro), var(--gris-oscuro), var(--gris-claro), var(--gris-oscuro), var(--gris-claro), var(--gris-oscuro), var(--gris-claro), var(--gris-oscuro), var(--gris-claro), var(--gris-oscuro));

}

.tronco .medio .parte:first-child {
    top: 5px;
}

.tronco .medio .parte:nth-child(2){
    top: 35px;
}

.tronco .inf {
    /* Posición */
    position: absolute;
    align-items: center;
    justify-content: center;
    display: flex;
    top: 120px;
    /* Atributos */
    width: 120px;
    height: 44px;
}

.tronco .inf .enchufe {
    /* Posición */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Atributos */
    width: 25px;
    height: 25px;
    background-color: var(--azul);
}

.tronco .inf .enchufe::before{
    /* Posición */
    position: absolute;
    /* Atributos */
    content: "";
    width: 20px;
    height: 5px;
    background-color: var(--gris-oscuro);
}

.tronco .inf .enchufe::after{
    /* Posición */
    position: absolute;
    z-index: 0;
    /* Atributos */
    content: "";
    width: 5px;
    height: 20px;
    background-color: var(--gris-oscuro);
}

.tronco .inf .enganche {
    /* Posición */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Atributos */
    width: 23px;
    height: 23px;
    border-color: var(--gris-oscuro);
    border-width: 2px;
    border-radius: 50%;
    border-style: solid;
}

.tronco .inf .enganche::before {
    /* Posición */
    position: absolute;
    z-index: 5;
    /* Atributos */
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--gris-claro);
    border-width: 2px;
    border-radius: 50%;
    border-style: solid;
    border-color: var(--azul);
}


.pie {
    /* Posición */
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    /* Atributos */
    width: 60px;
    height: 80px;
    background-color: var(--oscuro);
    border-radius: 7px;
    transform: perspective(70px) rotateX(40deg);
}

.pie::before {
    /* Posición */
    position: absolute;
    top: 5px;
    z-index: 5;
    /* Atributos */
    content: "";
    width: 7px;
    height: 67px;
    background: linear-gradient( to right, var(--gris-medio) 50%, var(--gris-claro), var(--gris-medio));
    border-color: var(--oscuro);
    border-width: 4px;
    border-radius: 7px;
    border-style: solid;
}

.pie::after {
    /* Posición */
    position: absolute;
    top: 10px;
    /* Atributos */
    content: "";
    width: 45px;
    height: 65px;
    position: absolute;
    background-color: var(--gris-medio);
    border-radius: 7px;
}



/* Animaciones ----------------------------------------------------------------------------------------------------------------------------- */
@keyframes acercarse{
    0% {
        transform: scale(1%);
        top: 20%;
        left:calc(50% - 160px);
        z-index: 0;
    }
    5% {
        transform: scale(1%);
        top: 20%;
        left:calc(50% - 160px);
        z-index: 0;
    }
   100% {
        transform: scale(100%);
        top: 20%;
        left:calc(50% - 160px);
    }
}

@keyframes luz {
    0% {
        background-color: var(--rojo);
    }
    20% {
        background-color: white;
    }
    25% {
        background-color: var(--azul);
    }
    50% {
        background-color: var(--rojo);
    }
    70% {
        background-color: var(--azul);
    }
    75% {
        background-color: white;
    }
    80% {
        background-color: var(--rojo);
    }
 }

 @keyframes abrirPuerta{
    0% {
        top: 0%;
     }
    50% {
        top: -90%;
     }
    100% {
        top:0%;
    }
 }