mirror of
https://github.com/balkian/gists.git
synced 2024-10-31 23:51:44 +00:00
121 lines
2.6 KiB
HTML
121 lines
2.6 KiB
HTML
<style media="all" type="text/css">
|
|
#badge{
|
|
font-size: 12px;
|
|
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: -10px 10px 5px #222;
|
|
-webkit-box-shadow: -10px 10px 15px #222;
|
|
-moz-box-shadow: -10px 10px 15px #222;
|
|
}
|
|
|
|
/* front pane, placed above back */
|
|
.front {
|
|
z-index: 4;
|
|
}
|
|
|
|
/* back, initially hidden pane */
|
|
.back {
|
|
width: 152px;
|
|
height: 190px;
|
|
transform: rotateY(180deg);
|
|
-webkit-transform: rotateY(180deg);
|
|
z-index: 3;
|
|
text-align: center;
|
|
padding: 15px;
|
|
padding-top: 5px;
|
|
border: 1px gray solid;
|
|
color: white;
|
|
}
|
|
|
|
.back h1 {
|
|
font-size: 14px;
|
|
padding: 4px;
|
|
margin: 2px;
|
|
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> |