Skip to content

Instantly share code, notes, and snippets.

@james2doyle
Created September 17, 2012 14:02
Show Gist options
  • Save james2doyle/3737438 to your computer and use it in GitHub Desktop.
Save james2doyle/3737438 to your computer and use it in GitHub Desktop.
css3 album flip
/* css3 album flip
http://labs.daryl.im/flipper/
http://dribbble.com/shots/731563-Music-player?list=popular&offset=0&page=2
*/
@font-face{
font-family: 'Pictos Custom';
src: url('http://codepen.io/fonts/icomoon.woff') format('woff');
}
body {
background: #555;
margin: 6em;
}
* {
box-sizing: border-box;
}
.item {
width: 300px;
height: 272px;
}
.item img {
height: 100%;
border: 4px solid white;
}
.one, .two {
position: relative;
top: 8px;
left: 0;
z-index: 2;
width: 130px;
height: 100%;
overflow: hidden;
}
.two {
width: 170px;
position: relative;
top: -264px;
left: 130px;
box-shadow: 0 0 0 0 rgba(0,0,0,0);
transform-style: preserve-3d;
backface-visibility: hidden;
transform-origin: left 50%;
transform: perspective(0);
transition: transform 0.6s ease, box-shadow 0.8s ease;
}
.two img {
position: relative;
top: 0;
right: 130px;
}
.item:hover .two {
box-shadow: 10px 0 50px -10px rgba(0,0,0,0.8);
transform: perspective(600px) rotateY(-60deg);
}
.controls {
position: relative;
bottom: 528px;
z-index: 1;
height: 264px;
width: 292px;
padding-right: 15px;
background: #ddd;
transition: transform 0.4s ease;
transform: translate3d(0,0,0);
}
.item:hover .controls {
transform: translate3d(8px,0,0);
}
.controls a {
font-size: 40px;
font-family: 'Pictos Custom';
color: #ddd;
text-decoration: none;
float:right;
margin-top: 38%;
display: block;
text-shadow: 0 1px 2px #555;
transition: all 1s ease-out, color 0.5s ease, text-shadow 0.2s ease;
}
.item:hover a {
color: #555348;
transform: translate3d(8px,0,0);
}
.controls a:hover {
color: #fff;
text-shadow: 0 2px 10px #333;
}
<div class="item">
<div class="one">
<img src="http://seaandbescene.com/wp-content/uploads/Big-Wreck-Albatross1.jpeg" />
</div>
<div class="two">
<img src="http://seaandbescene.com/wp-content/uploads/Big-Wreck-Albatross1.jpeg" />
</div>
<div class="controls">
<a href="#">a</a>
</div>
</div>
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment