body{
    background-color: #333;
}
.contenedor {
    height: 300px;
    width: 300px;
    perspective: 1000px;
    /* border: 1px solid red; */
    margin: 150px auto;
}

.box {
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    /* transform: rotateY(180deg) ; */
    /* transform: rotateY(180deg) rotateZ(180deg)  rotateX(180deg); */
    /* transition: 22s; */
    animation: rotar 7s infinite linear;
}

.elementos {
    height: 100%;
    width: 100%;
    /* background-color: blue; */
    transform-style: preserve-3d ;
    position: absolute;
}

:root{
    --trasladacion:translateZ(150px) ;
}

.elementos:nth-child(1){
    transform: rotateY(0deg) var(--trasladacion);
    /* background-color: yellow; */
}

.elementos:nth-child(2){
    transform: rotateY(180deg) var(--trasladacion);
    /* background-color: red; */
}

.elementos:nth-child(3){
    transform: rotateY(90deg) var(--trasladacion);
    /* background-color: green; */
}

.elementos:nth-child(4){
    transform: rotateY(-90deg) var(--trasladacion);
    /* background-color: goldenrod ; */
}

.elementos:nth-child(5){
    transform: rotateX(-90deg) var(--trasladacion);
    background-color: #fff;
}

.elementos:nth-child(6){
    transform: rotateX(90deg) translateZ(-200px) ;
    background-color: #111;
}

.item{
    height: 100%;
    width: 100%;
    transform-origin: bottom;
    /* border: 8px solid yellowgreen; */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotateX(30deg) ;
    transition: 2s ;
}

img{
    height: 100%;
    width: 100% ;
    object-fit: cover;
}

.contenedor:hover .item{
    transform: rotateX(-80deg);
}

@keyframes rotar {
    100%{
        transform: rotateY(360deg);
    }
    
}