JSFiddle - React, Tailwind, and code Playground

HTML

<body style="height: 100%" class="bluegradient">
    <ul id="movieposters">
        <li>
            <img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/>
        </li>
    </ul>
</body>

CSS

#movieposters li { 
            display:inline; float:left;
            -webkit-perspective: 500; 
            -webkit-transform-style: preserve-3d;
            -webkit-transition-property: perspective; 
            -webkit-transition-duration: 0.5s; 
            transition-duration: 1s; 
            -moz-perspective: 500; 
            -moz-transform-style: preserve-3d;
            -moz-transition-property: perspective; 

        width: 200px;
        }

        #movieposters li:hover { 
            -webkit-perspective: 5000; 
            -moz-perspective: 5000; 
            transition-duration: 1s; 
            transition-timing-function: linear; 
        width: 200px;
        }

        #movieposters li img { 
            -webkit-transform: rotateY(30deg);
            -webkit-transition-property: transform; 
            transition-duration: 0.5s; 
            -moz-transition-duration: 1s; 
            -moz-transform: rotateY(30deg);
            -moz-transition-property: transform; 

        width: 200px;
        }
        #movieposters li:hover img { 
        width: 200px;
            -webkit-transform: rotateY(0deg); 
            -moz-transform: rotateY(0deg);
        }