JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
			<div class="row center-block">	
				<div class="col-xs-push-2 col-xs-8 text-center">	
            		<div class="item-circled col-xs-4">
						<div class="face-container">
							<div class="face-card">
								<div class="face-1 front">
									<span>front</span>
								</div>
								<div class="face-1 back">
									<p>back</p>
								</div>
							</div> <!-- face-card -->
        				</div> <!-- face-container -->
    				</div> <!-- col-xs-4 -->
   				</div> <!-- col-xs-8 -->
   			</div> <!-- row -->
</div> <!-- container-fluid -->

CSS

.item-circled {
	position: relative;
  text-align: center;
  font-size: 300%;
}

.face-container {
	position: relative;
	z-index: 1;
	perspective: 1000px;
  width: 210px;
  height: 210px;
}

.face-card {
	transform-style: preserve-3d;
	transition: all .5s linear;
  width:100%;
  height: 100%
}

.face-container:hover .face-card {
	transform: rotateY(180deg);
	border-radius: 50%;
}

.face-1 {
	position: absolute;
	width: 100%;
	height: 100%;
  backface-visibility: hidden;
	overflow: hidden;
	border-radius: 50%;
}

.face-1.front{
  background-color: #eee;
  height: 100%
}

.face-1.back {
	background-color: #aaa;
	transform: rotateY(180deg);
}