1
0
mirror of https://github.com/balkian/gists.git synced 2024-12-23 22:58:12 +00:00
gists/gistfile1.html

118 lines
2.5 KiB
HTML
Raw Normal View History

2013-08-18 19:44:55 +00:00
<div class="widget-content">
<style media="all" type="text/css">
#badge{
position: relative;
width: 180px;
height: 210px;
margin: 0 auto;
/*border-bottom: 10px solid black;*/
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 180px;
height: 180px;
}
/* flip speed goes here */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
padding: 2px;
padding-bottom: 30px;
background-color: black;
box-shadow: -5px 5px 5px #555;
-webkit-box-shadow: -5px 5px 15px #555;
-moz-box-shadow: -5px 5px 15px #555;
}
/* front pane, placed above back */
.front {
z-index: 4;
}
/* back, initially hidden pane */
.back {
width: 148px;
height: 188px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 3;
text-align: center;
padding: 15px;
padding-top: 5px;
border: 1px gray solid;
}
.back h1 {
border-bottom: 1px dashed gray;
}
.back dl {
text-align: left;
}
.sticky:before {
content: "";
height: 20px;
width: 80px;
background: rgba(255,255,255,0.5);
position: absolute;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
top: 0;
left: 50%;
margin: -8px 0 0 -40px;
z-index: 5;
}
</style>
<div ontouchstart="this.classList.toggle('hover');" class="flip-container" id="badge">
<div class="flipper">
<div class="front">
<!-- front content -->
<img width="180" height="180" src="http://1.bp.blogspot.com/-u19-E3_AuGI/UIH9pgHT0VI/AAAAAAAAAFg/NFwtLZUOF24/s1600/Homer-Mr+X1.jpg" class="sticky" id="avatar">
</div>
<div class="back">
<!-- back content -->
<h1>Experto en LTE</h1>
<dl>
<dt>Nombre:</dt>
<dd> Mr X</dd>
<dt>Ocupación:</dt>
<dd>Experto en LTE</dd>
<dt>Sexo:</dt>
<dd>Sí, por favor</dd>
</dl>
</div>
</div>
</div>
</div>