Styling Web Forms and Views with CSS3 - HTML5 Programming for ASP.NET Developers - page 341

Transforms
Transitions add effects during the transition from one style to another. Transforms, on the other hand,
change the appearance of an element using effects such as rotating, skewing, and scaling. Consider the
following CSS rule:
.rotate {
padding:15px;
margin:20px;
background-color:#f3f3f3;
border: 2px solid #071394;
-ms-transform:rotate(5deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
This rule uses the transform property prefixed with vendor prefixes to rotate the element by 10
degrees. The rotate function accepts an angle by which the element is to be rotated. A positive number
indicates rotation in the clockwise direction, and a negative number indicates rotation in the
counterclockwise direction. Figure 13-20 shows the resulting <div> .
Figure 13-20. Rotating an element using the transform property
As you can see, the <div> element and the FormView inside it are rotated 10 degrees clockwise.
You can also add a skewing effect and change the scaling using the skew() and scale() functions,
respectively. You can also use multiple functions together, as the following CSS rule shows:
.skew {
padding:15px;
margin:20px;
background-color:#f3f3f3;