JSFiddle - React, Tailwind, and code Playground

by tejeskifly

HTML

<div class="tile">
    <img src="http://utazzlastminute.tripbook.hu/PICS/MAIN/miskolc.png" width="233" height="139" />
</div>

CSS

.tile {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    -webkit-animation: examplerev 0.75s ease 0s;
    animation: examplerev 0.75s ease 0s;
    -webkit-transform: perspective(300) rotateY(40deg);
    transform: perspective(300px) rotateY(40deg);
}
.tile:hover {
    width:233px;
    height:139px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    -webkit-animation: example 0.75s ease 0s;
    animation: example 0.75s ease 0s;
    -webkit-transform: perspective(300) rotateY(0deg);
    transform: perspective(300px) rotateY(0deg);
}
@-webkit-keyframes example {
    from {
        -webkit-transform: perspective(300) rotateY(40deg);
        -webkit-transform-origin: 0% 0%;
    }
    to {
        -webkit-transform: perspective(300) rotateY(0deg);
        -webkit-transform-origin: 0% 0%;
    }
}
@keyframes example {
    from {
        transform: perspective(300px) rotateY(40deg);
        transform-origin: 0% 0%;
    }
    to {
        transform: perspective(300px) rotateY(0deg);
        transform-origin: 0% 0%;
    }
}
@-webkit-keyframes examplerev {
    from {
        -webkit-transform: perspective(300) rotateY(0deg);
        -webkit-transform-origin: 0% 0%;
    }
    to {
        -webkit-transform: perspective(300) rotateY(40deg);
        -webkit-transform-origin: 0% 0%;
    }
}
@keyframes examplerev {
    from {
        transform: perspective(300px) rotateY(0deg);
        transform-origin: 0% 0%;
    }
    to {
        transform: perspective(300px) rotateY(400deg);
        transform-origin: 0% 0%;
    }
}