Animated 3D Text Using CSS3
Overview
In my previous post CSS3: 3D Text Using text-shadow I demonstrated a simple technique to create the impression of 3D text using the text-shadow CSS rule. In this post we will build upon that example to create animated 3D text using the CSS transition rule.
Mouseover or tap the figure below to trigger the animation.
editable
CSS
This effect is achieved by defining two text-shadow states to be transitioned over. Note that this example also transitions over the transform and positional CSS properties to make the animation more visually plausible.
Initial text-shadow and transform state
In this example the impression of 3D text is created by layering any number of individual text-shadows. The syntax for defining an solitary shadow is <x-offset> <y-offset> <blur-radius> <color>, e.g., '4px -5px 1px rgba(255,127,127,0.5)'. Shadows are layered in the order in which their corresponding definitions are listed in for text-shadow property, with the first definition corresponding to the nearest shadow.
- CSS
.animated-3d-text {
text-shadow: 2px 0px #FFF, /* front right edge highlight */
-1px 0px #EEE, /* front left edge highlight */
0px -2px #FFF, /* front top edge highlight */
0px 1px #EEE, /* front bottom edge highlight */
0px 3px 3px #888, /* bottom side dark shadow */
-3px 3px 1px #A1A1A1, /* bottom-left side dark shadow */
-3px 0px 1px #A1A1A1, /* left side dark shadow */
0px 3px 2px #AAA, /* bottom medium shadow */
-5px 5px 2px #AAA, /* bottom-left side medium shadow */
-5px 0px 2px #AAA, /* left side medium shadow */
0px 5px 2px #AAA, /* bottom medium shadow */
-6px 6px 0px #BBB, /* back bottom-left contrast */
-6px 0px 0px #BBB, /* back left contrast line */
0px 6px 0px #BBB, /* back bottom contrast line */
-10px 10px 7px rgba(0, 0, 0, 0.65), /* dark soft cast shadow */
0px 0px 10px rgba(0, 0, 0, 0.15); /* ambient shadow */
/* 9 degree rotation counter-clockwise */
-ms-transform: rotate(-9deg); /* IE9 */
-moz-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg); /* Safari, Android Browser */
transform: rotate(-9deg);
}Transition definition
In this example transitions are defined for the transform and text-shadow CSS properties. The basic syntax of a transition rule is the name of the CSS property to be transitioned over followed by the transition-duration, e.g., 'text-shadow 1.5s'. Once a transition is defined for a particular property any changes to that property will trigger an animation from the old to the new definition. Such is the case when a static rule is overridden by :hover CSS rule. For a complete guide on transitions check out Using CSS transitions.
- CSS
.animated-3d-text {
-ms-transition: left 1.5s, -ms-transform 1.5s, text-shadow 1.5s; /* IE9 */
-moz-transition: left 1.5s, -moz-transform 1.5s, text-shadow 1.5s;
-webkit-transition: left 1.5s, -webkit-transform 1.5s, text-shadow 1.5s; /* Safari, Android Browser */
transition: left 1.5s, transform 1.5s, text-shadow 1.5s;
}Final text-shadow and transform state
To make it appear as though the text is rotating along the axis perpendicular to the bottom of the container, all x-offset values are inverted so that a shadow specified by '-3px 3px 1px #888' is transformed to '3px 3px 0px #AAA'.
- CSS
.animated-3d-text:hover {
text-shadow: -1px 0px #FFF, /* front left edge highlight */
1px 0px #FFF, /* front right edge highlight */
0px -1px 0px #FFF, /* front top edge highlight */
0px 1px #FFF, /* front bottom edge highlight */
0px 3px 0px #AAA, /* bottom dark shadow */
3px 3px 0px #AAA, /* bottom-right side dark shadow */
3px 0px 0px #AAA, /* right side dark shadow */
0px 3px 0px #AAA, /* bottom side medium shadow */
5px 5px 0px #BBB, /* bottom-right side medium shadow */
5px 0px 0px #BBB, /* right side medium shadow */
0px 5px 0px #BBB, /* bottom medium shadow */
6px 6px 0px #CFCFCF, /* back bottom-right contrast line */
6px 0px 0px #CFCFCF, /* back right contrast line */
0px 6px 0px #CFCFCF, /* back bottom contrast line */
25px 35px 10px rgba(0, 0, 0, 0.35), /* light soft cast shadow */
0px 0px 10px rgba(0, 0, 0, 0.15); /* ambient shadow */
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}