CSS3 3D Text Animation Effects

Everyone loves 3D effects and so do I.Before you check out the demo’s below I want to discuss some compatibility issues of CCS3 in different browsers.Css3 is best interpreted by web-kit browsers like Google chrome.Other browsers may not even recognize css3, while browsers like Opera and Firefox will partly recognize but not as smooth as Google Chrome.Check out the Picture below and everything will be crystal clear.

1.Css3 3D Text Effect

3D text effect can be achieved by implementing 12 shadow properties from markdotto.

 HTML | 
 Copy to Clipboard |
?
 
01
<style>
02
h1 {
03
font-size: 75px;
04
font-family:medula one;
05
color:fff;
06
text-shadow: 0 1px 0 #ccc, 
07
               0 2px 0 #c9c9c9,
08
               0 3px 0 #bbb,
09
               0 4px 0 #b9b9b9,
10
               0 5px 0 #aaa,
11
               0 6px 1px rgba(0,0,0,.1),
12
               0 0 5px rgba(0,0,0,.1),
13
               0 1px 3px rgba(0,0,0,.3),
14
               0 3px 5px rgba(0,0,0,.2),
15
               0 5px 10px rgba(0,0,0,.25),
16
               0 10px 10px rgba(0,0,0,.2),
17
               0 20px 20px rgba(0,0,0,.15);
18
}
19
</style>
20
<h1>www.amazingthings.in</h1>

2.Css3 Smooth Color Change Effect On Hover

Using basic transition properties of css3,below effect can be achieved.

 HTML | 
 Copy to Clipboard |
?
 
01
h1 {
02
font-size: 75px;
03
font-family:medula one;
04
color:fff;
05
text-shadow: 0 1px 0 #ccc, 
06
               0 2px 0 #c9c9c9,
07
               0 3px 0 #bbb,
08
               0 4px 0 #b9b9b9,
09
               0 5px 0 #aaa,
10
               0 6px 1px rgba(0,0,0,.1),
11
               0 0 5px rgba(0,0,0,.1),
12
               0 1px 3px rgba(0,0,0,.3),
13
               0 3px 5px rgba(0,0,0,.2),
14
               0 5px 10px rgba(0,0,0,.25),
15
               0 10px 10px rgba(0,0,0,.2),
16
               0 20px 20px rgba(0,0,0,.15);
17
}
18
 
19
h1 span {
20
  -moz-transition: color 1s;
21
  -webkit-transition: color 1s;
22
  -o-transition: color 1s;
23
  transition: color 1s;
24
}
25
 
26
h1:hover .char1 {
27
  -moz-transition: color 0.2s;
28
  -webkit-transition: color 0.2s;
29
  -o-transition: color 0.2s;
30
  transition: color 0.2s;
31
  color: red;
32
-webkit-transform: scale(0.9);
33
 
34
}
35
 
36
h1:hover .char2 {
37
  -moz-transition: color 0.2s 0.1s;
38
  -webkit-transition: color 0.2s 0.1s;
39
  -o-transition: color 0.2s 0.1s;
40
  transition: color 0.2s 0.1s;
41
  color: orange;
42
}
43
 
44
h1:hover .char3 {
45
  -moz-transition: color 0.2s 0.2s;
46
  -webkit-transition: color 0.2s 0.2s;
47
  -o-transition: color 0.2s 0.2s;
48
  transition: color 0.2s 0.2s;
49
  color: yellow;
50
}
51
 
52
h1:hover .char4 {
53
  -moz-transition: color 0.2s 0.3s;
54
  -webkit-transition: color 0.2s 0.3s;
55
  -o-transition: color 0.2s 0.3s;
56
  transition: color 0.2s 0.3s;
57
  color: green;
58
}
59
 
60
h1:hover .char5 {
61
  -moz-transition: color 0.2s 0.4s;
62
  -webkit-transition: color 0.2s 0.4s;
63
  -o-transition: color 0.2s 0.4s;
64
  transition: color 0.2s 0.4s;
65
  color: blue;
66
}
67
 
68
h1:hover .char6 {
69
  -moz-transition: color 0.2s 0.5s;
70
  -webkit-transition: color 0.2s 0.5s;
71
  -o-transition: color 0.2s 0.5s;
72
  transition: color 0.2s 0.5s;
73
  color: indigo;
74
}
75
 
76
<div style="width:600px;">
77
<h1>
78
<span class="char1">Hover</span>
79
<span class="char2">me</span>
80
<span class="char3">to</span>
81
<span class="char4">see</span>
82
<span class="char5">me</span>
83
<span class="char6">change</span>
84
</h1>
85
</div>

3.Css3 Individual Letter Color Change Effect On Hover

This is the modification of the above effect which shows how individual letters changes their color on mouse hover.

 HTML | 
 Copy to Clipboard |
?
 
01
<style>
02
h1 {
03
font-size: 75px;
04
font-family:medula one;
05
color:fff;
06
text-shadow: 0 1px 0 #ccc, 
07
               0 2px 0 #c9c9c9,
08
               0 3px 0 #bbb,
09
               0 4px 0 #b9b9b9,
10
               0 5px 0 #aaa,
11
               0 6px 1px rgba(0,0,0,.1),
12
               0 0 5px rgba(0,0,0,.1),
13
               0 1px 3px rgba(0,0,0,.3),
14
               0 3px 5px rgba(0,0,0,.2),
15
               0 5px 10px rgba(0,0,0,.25),
16
               0 10px 10px rgba(0,0,0,.2),
17
               0 20px 20px rgba(0,0,0,.15);
18
}
19
 
20
span
21
{
22
cursor:pointer;
23
-webkit-transition: all .3s ease-out; 
24
   -moz-transition: all .3s ease-out; 
25
   -o-transition: all .3s ease-out; 
26
   transition: all .3s ease-out; 
27
}
28
 
29
span#char1:hover {
30
color: red;
31
 
32
}
33
 
34
span#char2:hover {
35
  color: yellow;
36
 
37
}
38
 
39
span#char3:hover {
40
  color: Green;
41
 
42
}
43
 
44
span#char4:hover {
45
  color: maroon;
46
 
47
}
48
 
49
span#char5:hover {
50
  color: blue;
51
 
52
}
53
 
54
span#char6:hover {
55
  color: pink;
56
 
57
}
58
 
59
span#char7:hover {
60
  color: orange;
61
 
62
}
63
 
64
span#char8:hover {
65
  color: purple;
66
 
67
}
68
 
69
</style>
70
<div style="width:600px;">
71
<h1>
72
<span id="char1">A</span>
73
<span id="char2">m</span>
74
<span id="char3">a</span>
75
<span id="char4">z</span>
76
<span id="char5">i</span>
77
<span id="char6">n</span>
78
<span id="char7">g</span>
79
<span id="char8">!</span>
80
<span id="char1">A</span>
81
<span id="char2">m</span>
82
<span id="char3">a</span>
83
<span id="char4">z</span>
84
<span id="char5">i</span>
85
<span id="char6">n</span>
86
<span id="char7">g</span>
87
<span id="char8">!</span>
88
</h1></div>

4.css3 3D Text With Shadow On Mouse Hover

This one is my favorite.As you can see I have just given the hover effect to the first demo which does nothing and it turned out to be beautiful.

 HTML | 
 Copy to Clipboard |
?
 
01
<style>
02
h1 {
03
font-size: 75px;
04
font-family:medula one;
05
color:ccc;
06
 
07
-webkit-transition: all .7s ease-out; 
08
   -moz-transition: all .7s ease-out; 
09
   -o-transition: all .7s ease-out; 
10
   transition: all .7s ease-out; 
11
}
12
 
13
h1:hover{
14
cursor:pointer;
15
color:fff;
16
text-shadow: 0 1px 0 #ccc, 
17
               0 2px 0 #c9c9c9,
18
               0 3px 0 #bbb,
19
               0 4px 0 #b9b9b9,
20
               0 5px 0 #aaa,
21
               0 6px 1px rgba(0,0,0,.1),
22
               0 0 5px rgba(0,0,0,.1),
23
               0 1px 3px rgba(0,0,0,.3),
24
               0 3px 5px rgba(0,0,0,.2),
25
               0 5px 10px rgba(0,0,0,.25),
26
               0 10px 10px rgba(0,0,0,.2),
27
               0 20px 20px rgba(0,0,0,.15);
28
}
29
 
30
 
31
</style>
32
<h1>www.amazingthings.in</h1>

5.Css3 Vibration Effect On a Single Letter

Yes,Css3 can also be used for animations using Keyframes.Check out An Introduction To CSS3 Keyframe Animations.

 HTML | 
 Copy to Clipboard |
?
 
01
<style>
02
h1 {
03
font-size: 75px;
04
font-family:medula one;
05
color:fff;
06
text-shadow: 0 1px 0 #ccc, 
07
               0 2px 0 #c9c9c9,
08
               0 3px 0 #bbb,
09
               0 4px 0 #b9b9b9,
10
               0 5px 0 #aaa,
11
               0 6px 1px rgba(0,0,0,.1),
12
               0 0 5px rgba(0,0,0,.1),
13
               0 1px 3px rgba(0,0,0,.3),
14
               0 3px 5px rgba(0,0,0,.2),
15
               0 5px 10px rgba(0,0,0,.25),
16
               0 10px 10px rgba(0,0,0,.2),
17
               0 20px 20px rgba(0,0,0,.15);
18
}
19
#vibrate h1 span {
20
display: inline-block;
21
-webkit-transition: all 0.3s ease-in-out 0s;
22
-moz-transition: all 1s ease-in-out 0s;
23
}
24
 
25
#vibrate h1:hover span {
26
-webkit-transform: scale(1.3);
27
-moz-transform: scale(1.3);
28
-webkit-animation: amaz 0.2s linear infinite 0.3s;
29
-moz-animation: amaz 0.2s linear infinite 0.3s;
30
}
31
 
32
 
33
 
34
@-webkit-keyframes amaz {
35
 0% {
36
 -webkit-transform: rotate(0) scale(1.3);
37
 }
38
 25% {
39
 -webkit-transform: rotate(5deg) scale(1.3);
40
 }
41
 50% {
42
 -webkit-transform: rotate(0deg) scale(1.3);
43
 }
44
 75% {
45
 -webkit-transform: rotate(-5deg) scale(1.3);
46
 }
47
 100% {
48
 -webkit-transform: rotate(0) scale(1.3);
49
 }
50
}
51
 
52
@-moz-keyframes amaz {
53
 0% {
54
 -moz-transform: rotate(0) scale(1.3);
55
 }
56
 25% {
57
 -moz-transform: rotate(5deg) scale(1.3);
58
 }
59
 50% {
60
 -moz-transform: rotate(0deg) scale(1.3);
61
 }
62
 75% {
63
 -moz-transform: rotate(-5deg) scale(1.3);
64
 }
65
 100% {
66
 -moz-transform: rotate(0) scale(1.3);
67
 }
68
}
69
</style>
70
<div id="vibrate" style="width:600px;">
71
<h1>What <span>R</span> you doing here ?</h1></div>

6.Css3 Zoom Effect On Mouse Hover

A Simple Zoom Effect on mouse hover , as simple as that

 HTML | 
 Copy to Clipboard |
?
 
01
<style>
02
h1 {
03
font-size: 75px;
04
font-family:medula one;
05
color:fff;
06
text-shadow: 0 1px 0 #ccc, 
07
               0 2px 0 #c9c9c9,
08
               0 3px 0 #bbb,
09
               0 4px 0 #b9b9b9,
10
               0 5px 0 #aaa,
11
               0 6px 1px rgba(0,0,0,.1),
12
               0 0 5px rgba(0,0,0,.1),
13
               0 1px 3px rgba(0,0,0,.3),
14
               0 3px 5px rgba(0,0,0,.2),
15
               0 5px 10px rgba(0,0,0,.25),
16
               0 10px 10px rgba(0,0,0,.2),
17
               0 20px 20px rgba(0,0,0,.15);
18
-webkit-transition: all .3s ease-out; 
19
   -moz-transition: all .3s ease-out; 
20
   -o-transition: all .3s ease-out; 
21
   transition: all .3s ease-out; 
22
}
23
 
24
h1:hover{
25
 -moz-transform: scale(1.2);
26
   -webkit-transform: scale(1.2);
27
   -o-transform: scale(1.2);
28
   transform: scale(1.2); 
29
}
30
 
31
 
32
</style>
33
<div align="center" style="width:600px;">
34
<h1>AmazingThings.in</h1></div>

7.Individual Letter Zoom Effect Using Lettering.js

This one is combination of css3 and lettering.js

 HTML | 
 Copy to Clipboard |
?
 
01
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery-1.4.2.min.js"></script> 
02
<script type="text/javascript" src="http://andreashommel.net/sandbox/lettering/jquery.lettering-0.6.min.js"></script> 
03
<link href='http://fonts.googleapis.com/css?family=Medula+One' rel='stylesheet' type='text/css'>
04
<style> 
05
 
06
h1 {
07
font-size: 75px;
08
font-family:medula one;
09
color:fff;
10
text-shadow: 0 1px 0 #ccc, 
11
               0 2px 0 #c9c9c9,
12
               0 3px 0 #bbb,
13
               0 4px 0 #b9b9b9,
14
               0 5px 0 #aaa,
15
               0 6px 1px rgba(0,0,0,.1),
16
               0 0 5px rgba(0,0,0,.1),
17
               0 1px 3px rgba(0,0,0,.3),
18
               0 3px 5px rgba(0,0,0,.2),
19
               0 5px 10px rgba(0,0,0,.25),
20
               0 10px 10px rgba(0,0,0,.2),
21
               0 20px 20px rgba(0,0,0,.15);
22
}
23
 
24
h1 span { 
25
 display:inline-block;
26
 -webkit-transition:all 0.2s ease-out;
27
}
28
 
29
h1 span:hover {
30
 -moz-transform:scale(1.3);
31
 -webkit-transform:scale(1.3); 
32
}
33
 
34
</style>
35
 
36
<h1 class="sexy">www.amazingthings.in</h1> 
37
 
38
<script language="javascript"> 
39
$(document).ready(function() {
40
  $(".sexy").lettering();
41
});
42
</script> </link>

Please leave your comments and let me know how creatively you implemented on your website.