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/

compass-flippy-mixin.sass

@mixin flippy($speed: 0.5s, $perspective: 500, $bgcolor: #fff)
  position: relative
  +perspective($perspective)
  .front, .back
    background-color: $bgcolor
    +transition(all, $speed, ease-in-out)
    +backface-visibility(hidden)
    +transform-style(preserve-3d)
    height: 100%
    width: 100%
    position: absolute
    top: 0
    left: 0
  .front
    .no-csstransforms3d &
      opacity: 1
  .back
    +rotateY(180deg)
    .no-csstransforms3d &
      visibility: hidden
      opacity: 0
  &:hover
    .front
      +rotateY(180deg)
      .no-csstransforms3d &
        visibility: hidden
    .back
      +rotateY(360deg)
      .no-csstransforms3d &
        visibility: visible
        opacity: 1

flippy-demo.html

<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-demo.sass

#flippy
  +no-bullets
  +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
        +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)