.recuerdos
 {
    width: 300px;
    height: 300px;
    margin: 8% auto;
}

.box-area {
    -webkit-animation: animate 10s ease-in-out infinite;
            animation: animate 10s ease-in-out infinite;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform-origin: 100px 100px 0;
        -ms-transform-origin: 100px 100px 0;
            transform-origin: 100px 100px 0;
}

@-webkit-keyframes animate {
    from, to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        -webkit-transform: rotateY(-90deg);
                transform: rotateY(-90deg);
    }

    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
                transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
                transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        -webkit-transform: rotateY(-270deg) rotateZ(90deg);
                transform: rotateY(-270deg) rotateZ(90deg);
    }

    83% {
        -webkit-transform: rotateX(-270deg);
                transform: rotateX(-270deg);
    }
    
}

@keyframes animate {
    from, to {
        -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    16% {
        -webkit-transform: rotateY(-90deg);
                transform: rotateY(-90deg);
    }

    33% {
        -webkit-transform: rotateY(-90deg) rotateZ(90deg);
                transform: rotateY(-90deg) rotateZ(90deg);
    }

    50% {
        -webkit-transform: rotateY(-180deg) rotateZ(90deg);
                transform: rotateY(-180deg) rotateZ(90deg);
    }

    66% {
        -webkit-transform: rotateY(-270deg) rotateZ(90deg);
                transform: rotateY(-270deg) rotateZ(90deg);
    }

    83% {
        -webkit-transform: rotateX(-270deg);
                transform: rotateX(-270deg);
    }
    
}

.box-area div {
    position: absolute;
    width: 300px;
    height: 300px;
    line-height: 300px;
}

.box-area .box1 {
    background-image: url(../img/amigos.jpeg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
}

.box-area .box2 {
    background-image: url(../img/miedo.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
}

.box-area .box3 {
    background-image: url(../img/patiti.jpeg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
            transform: rotateY(90deg) rotateX(90deg) translateZ(100px);
}

.box-area .box4 {
    background-image: url(../img/mascara.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
            transform: rotateY(180deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box5 {
    background-image: url(../img/miedo.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
            transform: rotateY(-90deg) rotateZ(90deg) translateZ(100px);
}

.box-area .box6 {
    background-image: url(../img/lentes.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
}