JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="case">
        <div class="disc"></div>
        <div class="back"></div>
        <div class="front"></div>
    </div>
</div>

CSS

div.container {
    width: 450px;
    height: 225px;
    
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}
div.front, div.back, div.disc {
    background-image: url('https://www.ecuad.ca/sites/www.ecuad.ca/files/imagecache/work_main_preview/users/2772/work/101440/Screen%20shot%202010-12-30%20at%203.13.58%20PM.png');
    width: 241px;
    height: 225px;
    
}
.case {
    position: relative;
    width: 241px;
    height: 225px;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;

    -moz-transition-delay: 0ms;
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}

.container:hover .case {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    -moz-transition-delay: 500ms;
    -webkit-transition-delay: 500ms;
    transition-delay: 500ms;
}
.front {
    position: absolute;
    background-position: -36px -28px;
}
.front, .disc {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.back {
    position: absolute;
    background-position: -132px -553px;
    -webkit-transform: rotatey(-180deg);
    -moz-transform: rotatey(-180deg);
    transform: rotatey(-180deg);
}
.disc {
    width: 218px!important;
    position: absolute;
    top: 0;
    left: 241px;
    background-position: -277px -28px;
    transition: all 500ms;

    -moz-transition-delay: 200ms;
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
}
.container:hover .disc {
    left: 23px;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);

    -moz-transition-delay: 0ms;
    -webkit-transition-delay: 0ms;
    transition-delay: 0ms;
}