Hover over each of the cards in the deck:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<script src="prefixfree.min.js"></script>
<script src="modernizr.js"></script>
<link rel="stylesheet prefetch" href="http://weloveiconfonts.com/api/?family=fontawesome">
<link rel="stylesheet prefetch" href="http://fonts.googleapis.com/css?family=Ubuntu">
<style>*,
*:after,
*:before {
box-sizing: border-box;
}
body {
overflow: hidden;
background: #c6c6c6;
-webkit-font-smoothing: antialiased;
}
.deck {
position: absolute;
width: 10em;
height: 13em;
top: 50%;
left: 50%;
margin: -6.5em 0 0 -5em;
-webkit-backface-visibility: hidden;
font-family: 'Ubuntu', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
text-align: center;
}
.deck__item {
width: 100%;
height: 100%;
position: absolute;
border-radius: .3em;
border: 0.1em solid rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.3), inset 0 6em 6em rgba(255, 255, 255, 0.1);
-webkit-transform-origin: 90% 92%;
transition: .3s;
}
.deck__item:hover ~ .deck__item {
-webkit-transform: rotate(120deg);
}
.deck__item:last-of-type:after {
content: "";
position: absolute;
left: 90%;
top: 92%;
border-radius: 50%;
width: 1.2em;
height: 1.2em;
background: white;
margin: -.6em 0 0 -.6em;
box-shadow: inset 0 1px 1px white, inset 0 -0.3em 0.2em #dddcdb, 0 0 0.6em rgba(0, 0, 0, 0.2);
}
.deck__item:last-of-type:before {
content: "";
position: absolute;
right: .4em;
bottom: .9em;
width: 1.1em;
height: .15em;
background: silver;
background: rgba(0, 0, 0, 0.1);
z-index: 2;
}
.deck__link {
text-decoration: none;
display: block;
color: white;
color: rgba(255, 255, 255, 0.8);
}
.deck__icon {
font-family: 'FontAwesome', sans-serif;
font-size: 4em;
color: black;
color: rgba(0, 0, 0, 0.6);
display: block;
margin: .5em auto;
}
.deck__item--facebook {
background: #3b5998;
-webkit-transform: rotate(-20deg);
}
.deck__item--github {
background: #4183c4;
-webkit-transform: rotate(-10deg);
}
.deck__item--twitter {
background: #00a0d1;
-webkit-transform: rotate(0deg);
}
.deck__item--linkedin {
background: #0e76a8;
-webkit-transform: rotate(10deg);
}
.deck__item--pinterest {
background: #910101;
-webkit-transform: rotate(20deg);
}
.deck__item--googleplus {
background: #db4a39;
-webkit-transform: rotate(30deg);
}
</style>
</head>
<body>
<ul class="deck">
<li class="deck__item deck__item--facebook">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-facebook"></span>
<span class="deck__label">Facebook</span>
</a>
</li>
<li class="deck__item deck__item--github">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-github"></span>
<span class="deck__label">GitHub</span>
</a>
</li>
<li class="deck__item deck__item--twitter">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-twitter"></span>
<span class="deck__label">Twitter</span>
</a>
</li>
<li class="deck__item deck__item--linkedin">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-linkedin"></span>
<span class="deck__label">LinkedIn</span>
</a>
</li>
<li class="deck__item deck__item--pinterest">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-pinterest"></span>
<span class="deck__label">Pinterest</span>
</a>
</li>
<li class="deck__item deck__item--googleplus">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-google-plus"></span>
<span class="deck__label">Google+</span>
</a>
</li>
</ul>
<script style="display: none;">var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
No comments:
Post a Comment