body{
    background-color: #fff;
    width: 100%;
    height: 100%;
}

#contenedor{
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(4, 25%);
    transform-style: preserve-3d;
}

.orange{
    width: 40%;
    height: 40%;
    transform: rotate(23deg) translate(-6px, -14px) scale(1, 0.7) skew(-20deg, -10deg);
    background-color: rgba(255, 165, 0, 1);
    margin: 0 auto;
    text-align: center;
    grid-area: 2 2 / 2 2;
}

.red{
    width: 40%;
    height: 40%;
    transform: rotate(180deg) translate(-6px, -14px) scale(1, 1) skew(0deg, 11deg);
    background-color: rgba(255, 0, 0, 1);
    margin: 0 auto;
    text-align: center;
    grid-area: 2 2 / 2 2;
}

.blue{
    width: 40%;
    height: 40%;
    transform: rotate(246deg) translate(-6px, -14px) scale(0.95, 0.7) skew(0deg, 32deg);
    background-color: rgba(0, 0, 255, 1);
    box-shadow: -2px 0px 0px 0px rgba(255, 0, 255, 1);
    margin: 0 auto;
    text-align: center;
    grid-area: 2 2 / 2 2;
}