Code examples from Visual Stylin' with CSS3 by Charles Wyke-Smith

Section 9 • Transforms

Stylin'

font:50px/1 "Arial Black";
border:1px solid;
padding:0px 0 10px;
margin-top:18px;
color:#17A6C3;

Stylin'

-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);

Stylin'

-moz-transform: rotate(20deg) skew(20deg); -webkit-transform: rotate(20deg) skew(20deg); transform: rotate(20deg) skew(20deg);

Stylin'

-moz-transform: rotate(20deg) skew(20deg) translate(-40px, 20px); -webkit-transform: rotate(20deg) skew(20deg) translate(-40px, 20px); transform: rotate(20deg) skew(20deg) translate(-40px, 20px);

Stylin'

-moz-transform: rotate(20deg) skew(20deg) scale(1.25); -webkit-transform: rotate(20deg) skew(20deg) scale(1.25); transform: rotate(20deg) skew(20deg) scale(1.25);
Figure 79: The basic transforms—rotate, skew, translate, and scale—are applied to a text element.

Stylin'

no transform applied

Stylin'

-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
transform:rotate(20deg);

Stylin'

-moz-transform-origin:left top;
-webkit-transform-origin:left top;
transform:rotate(20deg);

Stylin'

-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
transform:rotate(-20deg);
-moz-transform-origin:right bottom;
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
Figure 80: The transform-origin is set to the center (default), top-left, and bottom-right corners of the element.

K

Figure 81: Using the :before pseudo-class, a shadow is added to a large letter. The following figures show step-by-step how this effect is created. See Figure 88 for the complete CSS.

K

 h1 {
    margin:0;
    padding:0;
    font: 130px/.8 Trocchi, serif;	
    
    color:hsla(31,100%,54%,.8);
    
    text-shadow:
        1px -1px 0 #999,
        2px -2px 0 #BBB,
        3px -3px 0 #DDD;
    }
Figure 82: Three offset shadows are added to the letter to give it thickness.

<h1 title="K">K</h1>
    
Figure 84:The content of the h1 element's tag is also added to its title tag.

K

	
h1:before {
    content:attr(title);
    text-shadow:none; /* turn off '3-D' shadows */
    text-shadow:1px -1px 0 #555;
    }
    
Figure 85: The :before pseudo-class is used to add a copy of the letter.

K

h1 {
    margin:0;
    padding:0;
    font: 130px/.8 Trocchi, serif;	
    color:hsla(31,100%,54%,.8);
    
    position:relative;
    
    text-shadow:
        1px -1px 0 #999,
        2px -2px 0 #BBB,
        3px -3px 0 #DDD;
        }
    .shadow_transforms.demo13 h1:before {
    content:attr(title);
    text-shadow:none; /* turn off '3-D' shadows */
    text-shadow:1px -1px 0 #555;
    }
    
Figure 87: Now I make the type color transparent so only the shadow is visible and move it into position.

K

h1 {
    margin:0;
    padding:0;
    font: 130px/.8 Trocchi, serif;	
    color:hsla(31,100%,54%,.8);
    
    position:relative;
    
    text-shadow:
        1px -1px 0 #999,
        2px -2px 0 #BBB,
        3px -3px 0 #DDD;
    }
h1:before {
    content:attr(title);
    text-shadow:none; /* turn off '3-D' shadows */
    text-shadow:1px -1px 0 #555;
    
    color:transparent;
    position:absolute;
    
    -moz-transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -0-transform-origin: bottom center;
    transform-origin: bottom center;
    
    -moz-transform: skewX(-70deg);
    -webkit-transform: skewX(-70deg);
    -ms-transform: skewX(-70deg);
    -o-transform: skewX(-70deg);
    transform: skewX(-70deg);
    left:-16px;
    z-index:-1;
    }
Figure 88:The shadow is now behind the letter, and diffused to look like a more realistic shadow.