Another version of a social media hover board with major social media accounts
A Pen by Pali Madra on CodePen.
<div class="container"> | |
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> | |
<div class="flipper"> | |
<div class="front"> | |
<!-- front content --> | |
<span class="share entypo-export"></span> | |
</div> | |
<div class="back"> | |
<!-- back content --> | |
<ul> | |
<li class="social_square zocial-facebook facebook"></li> | |
<li class="social_square zocial-googleplus googleplus"></li> | |
<li class="social_square zocial-twitter twitter"></li> | |
<li class="social_square zocial-rss rss"></li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</div> |
//---- Import icons (Entypo, Zocial) We Love Icon Fonts ----// | |
@import url(http://weloveiconfonts.com/api/?family=entypo|zocial); | |
/* entypo */ | |
[class*="entypo-"]:before { | |
font-family: 'entypo', sans-serif; | |
} | |
/* zocial */ | |
[class*="zocial-"]:before { | |
font-family: 'zocial', sans-serif; | |
} | |
//---- Main Styles ----// | |
html, body{ | |
margin: 0; | |
padding: 0; | |
} | |
.container{ | |
position: absolute; | |
left: 50%; | |
top: 20%; | |
} | |
/* entire container, keeps perspective */ | |
.flip-container { | |
-webkit-perspective: 1000; | |
position: relative; | |
left: -50%; | |
&:after{ | |
content: ''; | |
position: absolute; | |
bottom:0; | |
left: 0; | |
right: 0; | |
height: 5px; | |
// @include box-shadow(0px 100px 100px 10px #999); | |
display: block; | |
} | |
} | |
/* flip the pane when hovered */ | |
.flip-container:hover .flipper, .flip-container.hover .flipper { | |
-webkit-transform: rotateY(180deg); | |
} | |
.flip-container, .front, .back { | |
width: 320px; | |
height: 320px; | |
} | |
/* flip speed goes here */ | |
.flipper { | |
-webkit-transition: 0.6s; | |
-webkit-transform-style: preserve-3d; | |
position: relative; | |
} | |
/* hide back of pane during swap */ | |
.front, .back { | |
-webkit-backface-visibility: hidden; | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
/* front pane, placed above back */ | |
.front { | |
z-index: 2; | |
background: #ddd; | |
line-height: 320px; | |
text-align: center; | |
.share{ | |
font-size: 1.5em; | |
text-align: center; | |
-webkit-transition: 0.6s; | |
-webkit-transform-style: preserve-3d; | |
position: relative; | |
@include border-radius(50%); | |
} | |
} | |
/* back, initially hidden pane */ | |
.back { | |
-webkit-transform: rotateY(180deg); | |
background: #333; | |
ul{ | |
margin: 0; | |
padding: 0; | |
} | |
li{ | |
list-style-type: none; | |
float: left; | |
width: 160px; | |
height: 160px; | |
line-height: 160px; | |
text-align: center; | |
color: white; | |
font-size: 1.5em; | |
&.facebook{ | |
background: #3b5998; | |
@include box-shadow(-10px -10px 0px lighten(#3b5998, 20%)); | |
} | |
&.googleplus{ | |
background: #dd4b39; | |
@include box-shadow(10px -10px 0px lighten(#dd4b39, 20%)); | |
} | |
&.twitter{ | |
background: #00aced; | |
@include box-shadow(-10px 10px 0px lighten(#00aced, 20%)); | |
} | |
&.rss{ | |
background: #FF9900; | |
@include box-shadow(10px 10px 0px lighten(#FF9900, 20%)); | |
} | |
} | |
} |