JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<div class="mask">
<div id="container">
	<div class="lower">
		<ul>
            <li>Sachin Tendulkar</li>
            <li>Cricketer</li>
        </ul>
	</div>
	<div class="upper">
		<img src="http://www.biography.com/imported/images/Biography/Images/Profiles/T/Sachin-Tendulkar-20710145-1-402.jpg" />

	</div>
</div>
</div>

CSS

.mask {
    width: 11.4em;
    height: 11.4em;
    border-radius: 10em;
    overflow: hidden;
    position: relative;
    display: block;
}


#container > div {
	position:absolute;
	left:0;
	top:0;
	width: 11.4em;
    height: 11.4em;
    border-radius: 10em;

	-webkit-transition:.5s;
	-moz-transition:.5s;
	transition:.5s;
}

#container > div.lower {

	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(180deg);
	-webkit-transform:perspective(800px) rotateY(180deg);
	transform:perspective(800px) rotateY(180deg);
}

#container ul, #container img {
    width: 11em;
    height: 11em;
    position: absolute;
    left:0;
	top:0;
    border: 0.2em solid #A22B3A;
    border-radius: 8em;
    line-height:40px;
    margin:0;padding:0;
}

#container ul
{
    font-size:20px;
	color:red;
    text-align: center;
    list-style-type:none;
    width:90%;height:90%;
}
#container li:first-child
{
    padding-top: 40px;
}
#container > div.upper {
	-moz-backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-transform:perspective(800px) rotateY(0deg);
	-webkit-transform:perspective(800px) rotateY(0deg);
	transform:perspective(800px) rotateY(0deg);
}

#container:hover > div.lower {
	-moz-transform:perspective(800px) rotateY(0);
	-webkit-transform:perspective(800px) rotateY(0);
	transform:perspective(800px) rotateY(0);
}

#container:hover > div.upper {
	-webkit-transform:perspective(800px) rotateY(-179.9deg);
	-moz-transform:perspective(800px) rotateY(-179.9deg);
	transform:perspective(800px) rotateY(-179.9deg);
}