In this little tutorial I’ll show how to make two 3D hover transitions like those on my portfolio.

[1] CSS3 Social Media icons 3D rotation

The first example is a CSS3 3D rotation of a Social Media icon. This is the markup:

1
2
3
4
5
6
7
<ul class="sm">
    <li>
        <a href="https://twitter.com/benoitboucart" target="_blank">
            <span>Twitter</span>
        </a>
    </li>
</ul>

And I created this sprite:

3D sprite

As you can see, for each social media I created 2 icons. The second one will be rotated 90° via CSS, so the icon image must be rotated 90°.

The link has the transform-style: preserve-3d; property set for the 3D effect.

1
2
3
4
5
6
7
8
9
.sm a {
   background: url(images/sm3d.png) no-repeat #2e8198; 
   background-position: 0 0;
   height: 27px; width: 27px; 
   display: inline-block; 
   transform: perspective(1000);
   transform-style: preserve-3d; 
   transition: all 400ms ease;
}

The hover style is even simpler! The background-position is changed and the image is rotated.

1
2
3
4
.sm a:hover {
   background-position: 0 -27px;
   transform: rotate(-90deg);
}

View the first demo

[2] Simple CSS3 3D hover (text) effect

The second example is 100% text, an example can be seen at the bottom of this article. This is the markup for the hover effect:

1
<a href="#"><span data-content="Hello world!">Hello world!</span></a>

Pay some special attention to the data-content attribute. This is required because it will be showed on hover, via CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.bizarlink {
  color: #000; text-decoration: none; background: white;
  font-size: .9em; font-family: Arial;
  display: inline-block; overflow: hidden; vertical-align: top; 
  perspective: 600px; 
  perspective-origin: 50% 50%;
}
.bizarlink span {
  display: block; position: relative; padding: 1.5em 3em;
  transition: all 400ms ease;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
}
.bizarlink:hover {color: #fff; }
.bizarlink:hover span {
  background: #000 color: white;
  transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.bizarlink span:after {
    content: attr(data-content);
    display: inline-block;position: absolute; left: 0; top: 0; right:0; bottom: 0;
    padding: 1.5em 3em;
    color: #fff; background: #000; 
    transform-origin: 50% 0%;
    transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
 }

View the second demo

[3] 3D hover effect with CSS3 animations