CSS3: Transforms - Notes

  • The transform property comes in two different settings, two-dimensional and three-dimensional. Each of these come with their own individual properties and values.

Vendor Prefixes

  div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

2D

Examples

  .box-0 {
  transform: scale(2);
 }
.box-1 {
  transform: scaleX(.5);
}
.box-2 {
  transform: scaleY(1.15);
}
.box-3 {
  transform: scale(.5, 1.15);
}

Combining Transforms

  transform: rotate(-45deg) skew(15deg, 15deg);

Transform Origin

The default transform origin is the dead center of an element, both 50% horizontally and 50% vertically.

To change this default origin position the transform-origin property may be used.

The transform-origin property values are treated like that of a background image position, using either a length or keyword value. That said, 0 0 is the same value as top left, and 100% 100% is the same value as bottom right.

More specific values can also be set, eg. 20px 50px would set the origin to 20 pixels across and 50 pixels down the element.


131 0 0