#wrap span{
    display: block;
    width:100px;
    height:100px;
    background-color: rgb(10, 118, 212);
    position: absolute;
    top:50px;
    left:50px;
}

#wrap{
    width: 150px;
    height:150px;
    margin:300px auto;
    animation: rotate 20s infinite;
    transform-style:preserve-3d ;
}

#wrap span img{
    width:100px;
    height:100px;
}

#in-front{
    transform: translateZ(50px);
}

#in-back{
    transform: translateZ(-50px);
}

#in-left{
    transform: rotateY(90deg)  translateZ(50px);
}

#in-right{
    transform:  rotateY(-90deg) translateZ(50px);
}

#in-top{
    transform:   rotateX(90deg) translateZ(50px);
}

#in-bottom{
    transform:  rotateX(-90deg) translateZ(50px);
}

@keyframes rotate{
    from{
        transform: rotateX(0deg)  rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

#wrap div{
    width:200px;
    height:200px;
    background-color: brown;
    position: absolute;
}
#wrap div img{
    width:200px;
    height:200px;
}

#out-front{
    transform: translateZ(100px);
}

#out-back{
    transform: translateZ(-100px);
}

#out-left{
    transform: rotateY(90deg)  translateZ(100px);
}

#out-right{
    transform:  rotateY(-90deg) translateZ(100px);
}

#out-top{
    transform:   rotateX(90deg) translateZ(100px);
}

#out-bottom{
    transform:  rotateX(-90deg) translateZ(100px);
}

#wrap:hover #out-front{
    transform: translateZ(150px);
}

#wrap:hover #out-left{
    transform: rotateY(90deg)  translateZ(150px);
}

#wrap:hover #out-right{
    transform:  rotateY(-90deg) translateZ(150px);
}

#wrap:hover #out-back{
    transform: translateZ(-150px);
}

#wrap:hover #out-top{
    transform:   rotateX(90deg) translateZ(150px);
}
#wrap:hover #out-bottom{
    transform:  rotateX(-90deg) translateZ(150px);
}