Understanding the CSS3 2D Transformation

, , Leave a comment

Web pages appeared mostly boxes horizontal, vertical lines and the only way to provide any variation to this rules was to use images. but with css3 we can draw two dimensional images. These new features supported by most modern browsers including IE9.  That means you can start practicing with these new features right away.

The transform Property

There are a number of transform properties we can use, including:

  • rotate: rotates an element
  • translate: moves an element horizontally and vertically
  • skew: distorts an element horizontally and vertically (not covered in this article)
  • scale: increases or decreases the size of an element

Here’s the basic syntax:

E { transform: function(value); }

A number of possible functions are available. Each function takes either a single value or a comma-separated list of values.

 

rotate

Probably the simplest of all the functions is rotate, which does what it sounds like it should do: It rotates the element around a set point. Here’s the syntax:

E { transform: rotate(value); }

To show you rotate in action, I’m going to rotate a Box element by –25 degrees (or 335 degrees), using this rule:

HTML

{code}<div class="Box">

<h2>CSS3 Rotate</h2>

</div>{/code}

CSS

{code}Box{

-webkit-transform: rotate(-25deg);

-moz-transform: rotate(-25deg);

-ms-transform: rotate(-25deg);

transform:rotate(-25deg);

}{/code}

 

transform-origin

The origin of a transformation is the point on an element about which that transformation happens. This concept is easiest to illustrate using rotate, although you can apply it to any of the transformation function.

You can visualize the origin by imagining you have a piece of paper (the element) and a pin (the origin of that element). If you use the pin to stick the paper to a flat surface, you can rotate the paper around the pin. By sticking the pin in different places on the paper, you can change how the rotation happens—if the pin is stuck in the center of the paper, the rotation has a short radius, and the paper on either side of the pin moves equally; if the pin is placed at one edge, the whole length of the paper rotates around it.

The default point of origin in the CSS transform property is the absolute (that is, horizontal and vertical) center. You can change this using the transform-origin property:

E { transform-origin: value(s); }

The value for this property is either one or two length or keyword values. Lengths can be any accepted CSS unit (em, px, etc.) or a percentage. The keywords are left, right, top, bottom, and center. If two values are supplied, the first sets the horizontal point and the second sets the vertical; if only one is supplied, that point sets the horizontal, with the vertical presumed to be center (or 50 percent).

If you want to change the point of origin to the top-left corner, you can use either of the following:

E { transform-origin: 0 0; }

E { transform-origin: left top; }

And if you want the point of origin to be the bottom-right corner, you can use these values

E { transform-origin: 100% 100%; }

E { transform-origin: right bottom; }

Example 1

{code}.box4{

background-color:#000;

width:150px;

height:80px;

-webkit-transform: rotate(-25deg);

-moz-transform: rotate(-25deg);

-ms-transform: rotate(-25deg);

transform:rotate(-25deg);

 

-webkit-transform-origin: left center;

-moz-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;

}{/code}

Example 2

{code}.box6{

background-color:#000;

width:150px;

height:80px;

-webkit-transform: rotate(-25deg);

-moz-transform: rotate(-25deg);

-ms-transform: rotate(-25deg);

transform:rotate(-25deg);

 

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

transform-origin: 100% 50%;

}{/code}

 

translate

The next function we’ll look at is translate, which moves the element from its default position. Three functions are actually involved: tranlateX, translateY, and translate:

E {transform: translateX(value);}

E { transform: translate(translateX,translateY); }

The first two functions, translateX and translateY, move the element along an axis

Example

{code}.box8{

background-color:#000;

width:150px;

height:80px;

 

-webkit-transform: translateX(20px);

-moz-transform: translateX(20px);

-ms-transform: translateX(20px);

transform: translateX(20px);

}{/code}

This code would move the element 20px to the right (along the x-axis). You can also use negative values, which would move the element in the opposite direction along the axis—that is, up or to the left.

The next function, translate, is shorthand for translateX and translateY. 
{code}.box9{

background-color:#000;

width:150px;

height:80px;

 

-webkit-transform: translate(20px,15%);

-moz-transform: translate(20px,15%);

-ms-transform: translate(20px,15%);

transform: translate(20px,15%);

}{/code}

 

skew

The skew function allows you to alter the angle of the horizontal or vertical axis (or both axes) of an element. As with translate, each axis has an individual function, and a shorthand function is available to indicate both:

E {transform: skewX(value);}

E{transform: skewY(value);}

E { transform: skew(skewX,skewY);}

The values for the skew functions are angle values. Negative values are permitted, and the skew shorthand can take either one or two values, if only one is specified, then the value is presumed to be skewX, and skewY defaults to 0.

Let me show you how skew works by providing three demonstrations, using this code:

Example 1

{code}.box10{

background-color:#000;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: skewX(25deg);

-moz-transform: skewX(25deg);

-ms-transform: skewX(25deg);

transform: skewX(25deg);

}{/code}

Example 2

{code}.box12{

background-color:#000;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: skewY(25deg);

-moz-transform: skewY(25deg);

-ms-transform: skewY(25deg);

transform: skewY(25deg);

}{/code}

Example 3

{code}.box13{

background-color:#000;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: skew(-25deg,5deg);

-moz-transform: skew(-25deg,5deg);

-ms-transform: skew(-25deg,5deg);

transform: skew(-25deg,5deg);

}{/code}

In the first example, the element is skewed by 25 degrees along its x-axis, causing the vertical edges to slope diagonally. In the second example, the skew is by 5 degrees on the y-axis, so the horizontal edges slope diagonally while the vertical edges remain unchanged. The final example shows the effect of two values being applied using the shorthand function. The values are –25 degrees on the x-axis and 5 degrees on the y-axis, so the element is sloped on both axes.

 

scale

You can make an element larger or smaller than the original by using the scale function. Once again, you have functions for the horizontal and vertical values and a shorthand function:

E {transform: scaleX(value);}

E{transform: scaleY(value);}

E { transform: scale(scaleX,scaleY); }

The values for scaleX and scaleY are unitless numbers, which give a size ratio. The default size is 1; 2 is twice the default, 0.5 is half the default, and so on. You can also use negative numbers

To make an element double its original size on both axes, you would use:

E {

transform: scaleX(2);

transform: scaleY(2);

}

Of course, you could also use the shorthand property, scale. Note, however, that the scale function works differently from the other shorthand properties you’ve seen so far in this chapter, in that if only one value is provided, the other is presumed to be identical. Using the previous example, you could opt instead for the shorthand:

E { transform: scale(2); }

I’ll demonstrate scale in action with a few examples. Here’s the code I’ll use:

Example 1

{code}.box12{

background-color:#000;

color:#FFFFFF;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: scale(0.5);

-moz-transform: scale(0.5);

-ms-transform: scale(0.5);

transform: scale(0.5);}{/code}

Example 2

{code}.box13{

background-color:#000;

color:#FFFFFF;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: scaleX(0.5);

-moz-transform: scaleX(0.5);

-ms-transform: scaleX(0.5);

transform: scaleX(0.5); }{/code}

Example 3

{code}.box14{

background-color:#000;

color:#FFFFFF;

width:150px;

height:80px;

left:25px;

 

-webkit-transform: scale(1,-1);

-moz-transform: scale(1,-1);

-ms-transform: scale(1,-1);

transform: scale(1,-1);

}{/code}

The first example has a scale value of 0.5, so the transformed element is half the size of the original—remember I specified only one value in the shorthand, so the other is presumed to be equal. In the second example, I used 0.5 as a value but this time for the scaleX function, meaning the transformed element is the same height as the original but only half the width.

In the final example, I supplied two values to the scale shorthand: The first is 1 (one), which sets the horizontal size to be the same as the original, but the second is –1 (negative one). Using a negative value has the effect of flipping the element vertically, creating a “reflection” of the original element at the same scale.

Share this:
 

Leave a Reply