@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
*{
    padding: 0;
    margin: 0; 
    font-family: 'Quicksand', sans-serif;
}
body{
    background:#262626;
}
.container{
    position: absolute;
    top: 50%;  left: 50%;
    transform: translate(-50%,-50%); 
    width: 700px;   height: 400px;
    cursor: pointer;
}
.container img{
    position: absolute;
    top: 0;  left: 0;
    width: 100%;   height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    transition: 0.7s;
    border: 0px solid #fff;
    border-radius: 20px;
}
.container img:nth-of-type(1){
    transform: perspective(2000px) rotateY(0deg);   
}
.container img:nth-of-type(2){
    transform: perspective(1000px) rotateY(-180deg);
}
.container:hover img:nth-of-type(1){
    transform: perspective(1000px) rotateY(180deg);   
}
.container:hover img:nth-of-type(2){
    transform: perspective(1000px) rotateY(0deg);
}