How to Create Transformations with CSS 3 - dummies

How to Create Transformations with CSS 3

CSS 3 lets you create many cool effects on your website for displaying on the iPhone and iPad. The CSS 3 transform properties enable you to transform an element to create effects in 2D and 3D. You can specify a list of transformations to change multiple aspects of an element. If multiple options are specified, each is applied in the order listed.

Transformation options include the ones described in this list:

  • scale — Changes the height and width of an element. You can specify two numbers to define a different scale for width and height. However, this element is generally used with only one number to scale an element proportionately. The first of the following examples transforms the element to scale to half its size, and the second transforms the element to half as wide and twice as tall:

    -webkit-transform: scale(0.5);
    -webkit-transform: scale(2, 0.5);
  • translate — Use this property to translate, or move, an element from position A to position B equally along the x and y axes. You can also use translateX and translateY to move elements along only one axis at a time. For example, this code causes an element to move 150 pixels from the left and 150 from the top:

    -webkit-transform: translate(150px, -150px);
  • skew — Use this property to skew, or change the position of an element based on a specified value that skews an element on the x and y axes. For example, this could skew an element 20 degrees on the x axis:

    -webkit-transform: skew(15deg,  4deg);
  • rotate — Use this property to rotate, or change the position of an element based on a specified value that controls the angle of rotation. For example, the first example in this code rotates an element 5 degrees to the right, the second one rotates the element –5 (negative 5) degrees.

    As you can see in the figure, it causes the photos on the right and left in this design to angle away from the center image:

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

In the SCUBA site example shown in this figure, notice that the two outside images rotate to the left and right, respectively, using the CSS Rotate feature — but only on Safari, Firefox, and Chrome. Visit this page with IE and the boxes are all in a straight line, but they don’t look bad that way, so there’s no harm done.


Also notice that there’s an image tucked into the bottom of the design so that when you turn the iPad/iPhone from landscape to portrait view, content fills the entire screen.