In a previous post I’ve made two subtle CSS3 hover effects with CSS transitions. In this tutorial I’m using CSS3 animations and transitions to create a “swinging” hover effect for a “follow me on Twitter” button.

Swinging CSS3 animation hover effect

The markup for the "flip effect"

This is the (simple) markup for the hover effect:

NOTE: Only the .hover block contains the link but you could easily convert the .block container to a link.

1
2
3
4
<div class="block">
    <div class="normal">Follow me...</div>
    <a class="hover" title="My twitter profile" href="http://twitter.com/benoitboucart" target="_blank">on Twitter </a>
</div>

The CSS

The 3D perspective is set on the .block container. This will add a little 3D effect when the block is animating. Try to remove it and see the difference: the animation around the the X-axis will not work but the .hover will be correctly positionned.

1
.block { position: relative; perspective: 350; }

The .hover block is then positioned under the .normal block:

1
2
.block .normal { position:relative; z-index:2; }
.block .hover { position: relative; z-index:1; margin-top:-48px; }
The perspective property defines how many pixels a 3D element is placed from the view. This property allows you to change the perspective on how 3D elements are viewed. (W3Schools)

The hover effect and CSS3 animation

When the .block container is hovered, the .hover is animated and positionned correctly under the title:

1
2
3
4
5
.block:hover .hover { 
    margin-top: 0; 
    transform-origin: top; 
    animation: balance 1.5s ease-in-out 110ms 1 alternate;
}

The animation is a simple rotation around the X-axis (with the transform: rotateX(30deg) property), see the Dabblet demo of this tutorial for the complete and unprefixed CSS.

See the result on Dabblet