/*estilos generales de las capas*/
section {
    padding: 50px;
}
.cara {
    /*creamos el estilo general de cada una de las cajas del cubo*/
    width: 50%;
    height: 150px;
    line-height: 150px;
    font-size: 3rem;
    text-align: center;
    color: #fff;
    background-color: rgb(38, 210, 196);
    border: 5px solid rgb(255, 153, 0);
    margin: 20px;
}

h2+div {
    width: 100%;
    height: auto;
    margin-left: 50px;
    margin-top: 50px;
}

/*hasta aquí estilos generales de las capas*/

/*PROPIEDADES Y FUNCIONES DE TRANSFORMACIÓN 2D A PARTIR DE AQUÍ*/
/*A partir de aquí, CSS solo para la parte del ejercicio de "Elemento al que le aplicamos despalzamiento"*/
/*aplicamos la propiedad transform: translate*/
.transform-translate {
    transform: translate(90px, 30px);
    /*Desplazamos el elemento 90px hacia la derecha y 30px hacia abajo*/
}

/*aplicamos la propiedad translate*/
.translate {
    translate: 90px 30px;
    /*Desplazamos el elemento 90px hacia la derecha y 30px hacia abajo*/
}

/*A partir de aquí, CSS solo para la parte del ejercicio de "Elemento girado 15º"*/
/*aplicamos la propiedad transform: rotate*/
.transform-rotate{
    transform: rotate(-15deg);
}

/*aplicamos la propiedad rotate*/
.rotate{
    rotate: -15deg;
}

/*A partir de aquí, CSS solo para la parte del ejercicio de "Elemento escalado"*/
/*aplicamos la propiedad trasnform: scale*/
.transform-scale{
    transform: scale(1.1);
}

/*aplicamos la propiedad scale*/
.scale{
    scale: 1.1;
}

/*A partir de aquí, CSS solo para la parte del ejercicio de "Elemento deformado*/
.skew {
    transform: skew(25deg, 5deg);
}

/*A partir de aquí, CSS solo para la parte del ejercicio de "Profundidad"*/
.profundidad {
    position: relative;
    margin-top: 90px;
    margin-left: 200px;
}

.profundidad .cara.frontal {
    z-index: 2;
    top: 60px;
    left: -40px;

}

.profundidad .cara.arriba {
    top: -15px;
    left: 60px;
    z-index: 1;
}

.profundidad .cara.izquierda {
    top: -80px;
    left: 170px;
    z-index: 0;
}

/*Hasta aquí CSS solo para la parte del ejercicio de "Profundidad"*/