Messing around with 3d transforms and delayed transitions. Colours from http://colour.charlottedann.com/ and icons from http://symbolset.com/
A Pen by Charlotte Dann on CodePen.
<section class="ss-icon"> | |
<a href="#"><article><span>facebook</span></article></a> | |
<a href="#"><article><span>twitter</span></article></a> | |
<a href="#"><article><span>tumblr</span></article></a> | |
<a href="#"><article><span>pinterest</span></article></a> | |
<a href="#"><article><span>behance</span></article></a> | |
<a href="#"><article><span>github</span></article></a> | |
<a href="#"><article><span>linkedin</span></article></a> | |
<a href="#"><article><span>dribbble</span></article></a> | |
<a href="#"><article><span>instagram</span></article></a> | |
<a href="#"><article><span>flickr</span></article></a> | |
<a href="#"><article><span>blogger</span></article></a> | |
<a href="#"><article><span>vimeo</span></article></a> | |
</section> |
/* | |
also forked with CrAZy flip | |
http://codepen.io/pouretrebelle/pen/xHuit | |
*/ |
@import "compass"; | |
@import url('http://www.charlottedann.com/ect/symbolset/ss-social.css'); | |
section { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -135px -180px; | |
width: 360px; | |
min-height: 270px; | |
font-size: 35px; | |
text-align: center; | |
} | |
a { | |
display: inline-block; | |
position: relative; | |
float: left; | |
width: 80px; | |
height: 80px; | |
margin: 5px; | |
} | |
article { | |
cursor: pointer; | |
display: block; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-color: #333; | |
box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000; | |
color: #fff; | |
line-height: 90px; | |
transform: perspective(300px) rotateY(0deg); | |
transition: transform 0.4s linear, background-color 0s linear 0.2s, color 0s linear 0.2s; | |
a:hover & { | |
transform: perspective(300px) rotateY(180deg); | |
color: #eee; | |
transition: transform 0.2s linear, background-color 0s linear 0.1s, color 0s linear 0.1s; | |
} | |
a:nth-child(1):hover & {background-color: #3B5998;} | |
a:nth-child(2):hover & {background-color: #00ACED;} | |
a:nth-child(3):hover & {background-color: #2C4762;} | |
a:nth-child(4):hover & {background-color: #CB2027;} | |
a:nth-child(5):hover & {background-color: #1769FF;} | |
a:nth-child(6):hover & {background-color: #4183C4;} | |
a:nth-child(7):hover & {background-color: #3399CC;} | |
a:nth-child(8):hover & {background-color: #EA4C89;} | |
a:nth-child(9):hover & {background-color: #3F729B;} | |
a:nth-child(10):hover & {background-color: #FF0084;} | |
a:nth-child(11):hover & {background-color: #F26300;} | |
a:nth-child(12):hover & {background-color: #445566;} | |
} | |
span { | |
transition: transform 0s linear 0.2s, text-shadow 0s linear 0.2s; | |
display: block; | |
-webkit-font-smoothing: subpixel-antialiased; | |
font-smoothing: antialiased; | |
a:hover & { | |
transition: transform 0s linear 0.1s, text-shadow 0s linear 0.1s; | |
transform: scale(-1, 1); | |
text-shadow: 0 0 50px rgba(255,255,255,0.5); | |
} | |
} | |
body { | |
@include background(linear-gradient(left, #BADEA6, #B3DEA6 50%, #BADEA6)); | |
} |