﻿
.content-all{

	background:#CCCCCC;
    
    width: 190px;

    margin: auto;

    perspective: 800px;

    position: relative;

    margin-top: 50px;

}


.content-carrousel{

    width: 100%;

    position: absolute;

    animation: rotar 25s infinite linear;

    transform-style: preserve-3d;

}



.content-carrousel:hover{

    animation-play-state: paused;

    cursor: pointer;

}


.content-carrousel figure{

    width: 100%;

    height: 120px;

    overflow: hidden;

    position: absolute;

    box-shadow: 0px 0px 20px 0px black;

    transition: all 300ms;
}

.content-carrousel figure:hover{

    box-shadow: 0px 0px 0px 0px black;

    transition: all 300ms;

}


.content-carrousel figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);}

.content-carrousel figure:nth-child(2){transform: rotateY(40deg) translateZ(300px);}

.content-carrousel figure:nth-child(3){transform: rotateY(80deg) translateZ(300px);}

.content-carrousel figure:nth-child(4){transform: rotateY(120deg) translateZ(300px);}

.content-carrousel figure:nth-child(5){transform: rotateY(160deg) translateZ(300px);}

.content-carrousel figure:nth-child(6){transform: rotateY(200deg) translateZ(300px);}
.content-carrousel figure:nth-child(7){transform: rotateY(240deg) translateZ(300px);}

.content-carrousel figure:nth-child(8){transform: rotateY(280deg) translateZ(300px);}

.content-carrousel figure:nth-child(9){transform: rotateY(320deg) translateZ(300px);}

.content-carrousel figure:nth-child(10){transform: rotateY(360deg) translateZ(300px);}


.content-carrousel img{

    width: 100%;
    height:100%;

    transition: all 300ms;

}

.content-carrousel img:hover{

    transform: scale(1.2);

    transition: all 300ms;

}

@keyframes rotar{

    from{

        transform: rotateY(0deg);

    }to{

        transform: rotateY(360deg);

    }

}