JSFiddle - React, Tailwind, and code Playground
by Mahendra Kulkarni
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Jquery Flip CND-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<body style="background-image:url('hero_v3.jpg');">
<div id="flipper">
<div id="one"><h3 class="text">Developer</h3><span class="glyphicon glyphicon-eye-open"></span>
<div class="back face center">
<p>one Back Side</p>
</div>
</div>
<div id="two"><h3 class="text">Design</h3> <span class="glyphicon glyphicon-tags"></span>
<div class="back face center">
<p>two Back Side</p>
</div>
</div>
<div id="three"><h3 class="text">Web</h3> <span class="glyphicon glyphicon-globe"></span>
<div class="back face center">
<p>three Back Side</p>
</div>
</div>
<div id="four"><h3 class="text">Photography</h3><span class="glyphicon glyphicon-eye-open"></span>
<div class="back face center">
<p>Four Back Side</p>
</div>
</div>
<div id="five"><h3 class="text">Business</h3> <span class="glyphicon glyphicon-retweet"></span>
<div class="back face center">
<p>Five Back Side</p>
</div>
</div>
<div id="six"><h3 class="text">Education</h3><span id="gly_dev" class="glyphicon glyphicon-pencil"></span>
<div class="back face center">
<p>Six Back Side</p>
</div>
</div>
<div id="seven"><h3 class="text">3D+Animation</h3> <span class="glyphicon glyphicon-picture"></span>
<div class="back face center">
<p>Seven Back Side</p>
</div>
</div>
<div id="eight"><h3 class="text">Video</h3><span class="glyphicon glyphicon-facetime-video"></span>
<div class="back face center">
<p>Eight Back Side</p>
</div>
</div>
<div id="nine"><h3 class="text">Audio+Music</h3> <span...
CSS
body{
}
#flipper{
width:900px;
height:400px;
margin:0 auto;
margin-top:120px;
/* position: relative; */
z-index: 1;
}
#one{
width:180px;
height:180px;
background-color:#706d3c;
cursor:pointer;
opacity:0.9;
float:left;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#two{
width:180px;
height:180px;
background-color:#e65527;
float:left;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#three{
width:180px;
height:180px;
background-color:#37a5b3;
float:left;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#four{
width:180px;
height:180px;
background-color:#363948;
float:left;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#five{
width:180px;
height:180px;
float:left;
background-color:#716f84;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#six{
width:180px;
height:180px;
float:left;
background-color:#d5bc3a;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#seven{
width:180px;
height:180px;
float:left;
background-color:#5ea07f;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#eight{
width:180px;
height:180px;
float:left;
background-color:#1d6285;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#nine{
width:180px;
height:180px;
float:left;
background-color:#86b3bb;
cursor:pointer;
opacity:0.9;
transform-style: preserve-3d;
transition: all 0.5s linear;
}
#ten{
width:180px;
height:180px;
float:left;
background-color:#888;
opacity:0.9;
cursor:pointer;
}
#one:hover {
transform: rotateY(180deg);
opacity:1;
}
#two:hover {
transform: rotateY(180deg);
opacity:1;
}
#three:hover {
transform: rotateY(180deg);
opacity:1;
}
#four:hover {
transform:...