Skip to content

Instantly share code, notes, and snippets.

@nathos
Last active October 23, 2017 22:21
Show Gist options
  • Save nathos/1040869 to your computer and use it in GitHub Desktop.
Save nathos/1040869 to your computer and use it in GitHub Desktop.
Compass flippy - fun 3D flip animations with graceful fallback (using Modernizr) for unsupported browsers. The animation looks great in Safari, not quite as great in Chrome. See the demo at http://nathos.github.com/flippy/
@mixin flippy($speed: 0.5s, $perspective: 500, $bgcolor: #fff)
position: relative
@include perspective($perspective)
.front, .back
background-color: $bgcolor
@include transition(all $speed ease-in-out)
@include backface-visibility(hidden)
@include transform-style(preserve-3d)
height: 100%
width: 100%
position: absolute
top: 0
left: 0
.front
.no-csstransforms3d &
opacity: 1
.back
@include rotateY(180deg)
.no-csstransforms3d &
visibility: hidden
opacity: 0
&:hover
.front
@include rotateY(180deg)
.no-csstransforms3d &
visibility: hidden
.back
@include rotateY(360deg)
.no-csstransforms3d &
visibility: visible
opacity: 1
<ul id='flippy'>
<li>
<div class='front'>
<p id='twitter'>
Twitter
</p>
</div>
<div class='back'>
<p>Follow me <a href="http://twitter.com/nathos">@nathos</a></p>
</div>
</li>
<li>
<div class='front'>
<p id='facebook'>
Facebook
</p>
</div>
<div class='back'>
<p>Sorry, I don't use Facebook anymore!</p>
</div>
</li>
<li>
<div class='front'>
<p id='forrst'>
Forrst
</p>
</div>
<div class='back'>
<p>My <a href="http://forrst.com/people/nathos">Forrst profile</a></p>
</div>
</li>
<li>
<div class='front'>
<p id='rss'>
RSS
</p>
</div>
<div class='back'>
<p>No feeds yet!</p>
</div>
</li>
</ul>
#flippy
@include no-bullets
@include pie-clearfix
background-color: #555
width: 348px
margin: 0 auto 45px
padding: 50px 50px 36px
position: relative
li
float: left
width: 160px
height: 80px
margin: 0 7px 14px 7px
// Here's the important bit. Optional arguments are $speed, $perspective, and $bgcolor
@include flippy
.back
p
padding: 25px 15px
.front
p
@include hide-text
width: 55px
height: 55px
margin: 12px auto
// using Compass sprites for the images, but that's another demo :)
#twitter
background: sprite($sprites, twitter_on)
#facebook
background: sprite($sprites, facebook_on)
#forrst
background: sprite($sprites, forrst_on)
#rss
background: sprite($sprites, rss_on)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment