1
0
mirror of https://github.com/balkian/balkian.github.com.git synced 2024-11-05 03:21:42 +00:00

Fixed avatar

This commit is contained in:
J. Fernando Sánchez 2015-01-11 21:47:17 +01:00
parent 5d51bc77e4
commit 31c7e9ec9a
3 changed files with 20 additions and 17 deletions

View File

@ -55,12 +55,12 @@
<div id="contentwrapper">
<div id="sidebar" >
<div id="badge" class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front sticky">
<div class="flipper sticky">
<div class="front">
<!-- front content -->
<img id="avatar" width=100% src="/img/me.png">
</div>
<div class="back stickyback">
<div class="back">
<!-- back content -->
<img id="picture" width=100% src="/img/me.jpg">
</div>

View File

@ -54,6 +54,7 @@
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
@ -67,14 +68,16 @@
/* front pane, placed above back */
.front {
z-index: 4;
z-index: 3;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 3;
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 4;
}
.sticky:after {
@ -92,15 +95,15 @@
z-index: 1000;
-webkit-transform:rotate(43deg);
-moz-transform:rotate(43deg);
backface-visibility: visible;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sticky:hover:after {
content: "";
visibility: hidden;
}
/*.flip-container:hover .sticky:after {*/
/*content: "";*/
/*visibility: hidden;*/
/*}*/
#container {
min-height: 100%;

View File

@ -66,14 +66,14 @@
/* front pane, placed above back */
.front {
z-index: 4;
z-index: 3;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
z-index: 3;
z-index: 4;
}
.sticky:after {
@ -91,9 +91,9 @@
z-index: 1000;
-webkit-transform:rotate(43deg);
-moz-transform:rotate(43deg);
backface-visibility: visible;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.sticky:hover:after {