IMC Home Page | Library Home Page | UAlbany Home Page
Introduction to
Basic HTML 5 & CSS3 Effects

Twisties

Montana farm sceneUntil the development of CSS3 the traditional presentational format of Web page elements was always "square." That is, the components of a page, such as divs and images, always had to be aligned in a "north-south" fashion. On the right are examples of this sort of layout.

 

 

Content for id "FloatingDiv1" Goes Here

 

 

 

 

 

 

 

 

Montana farm view rotatedThe image and the division (div) are aligned squarely on the page. To twist, or rotate, and image it was necessary to create the effect graphically. The example on the right demonstrates this effect. This photo appears to be rotated clockwise. Although the "picture" portion of the image is, indeed, rotated, in fact the image itself is not.

 

 

 

Montana farm view with border

On the right is the same image, but in this example we have applied a simple blue border. You can see that the actual image is somewhat larger than the picture area. In this instance the rotation was created by using Photoshop, but it can also be done with Fireworks, Illustrator, or nearly any other graphics program.

 

 

 

CSS3 offers several new options for displaying page elements, including rotation. The rotation of the element is specified by numerical value. This means that the element can be readily controlled and adjusted using CSS3 phrasing rather than by graphical means.

Special Note: All current browsers support the rotate feature. However, the specification for the rule must be written with four alternatives, one for each browser group. The sample rule below include inline notes that show which browser is included in which group.

div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

Here on the right is a simple div that is presented in the traditional, square, manner.

 

 

 

On the right is an identical div, but this time it has a 30 degree clockwise rotation as illustrated in the CSS sample above.

 

 

 

 

You can also apply a counterclockwise rotation by apply negative values. Here is a 30 degree counterclockwise rotation on the right.

This div has been given the id RedCounterTwist and here is the CSS rule for the effect:

#RedCounterTwist {
background-color: #900;
margin: 40px;
float: right;
height: 100px;
width: 200px;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg); /* IE 9 */
-webkit-transform: rotate(-30deg); /* Safari and Chrome */
-o-transform: rotate(-30deg); /* Opera */
-moz-transform: rotate(-30deg); /* Firefox */
}

Notice that the entire rule includes attributes for background color, dimensions, margins and more.

Montana Farm rotated for display

Rotation can also be applied to images. On the right is the photograph we used earlier, but with a 10 degree clockwise rotation.

The id for this photo is TenTwist, the CSS rule is:

#TenTwist {
transform: rotate(10deg);
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-o-transform: rotate(10deg); /* Opera */
-moz-transform: rotate(10deg); /* Firefox */
margin: 20px;
float: right;
}

Of course, if you use classes rather than ids you can apply the same rotation to several elements. Here is a class named FiveCounter and three divs to which it is applied.

 

 

 

 

It is necessary to specify the rotational values for each of the browser groups and the values must match. If they do not match the rotation will be different for each browser. In addition, there is a portion of the rule that specifies the "method" of the display. In the class above that method is described as:

transform: rotate(10deg);

This value for transform, in this case 10 degrees, must also match the values applied to the browser groups.

<-- Return to top of page -->