CSS3 Transform

Use CSS 3 to tranform elements in a page, such as rotating an object by a specified angle, or skewing/scaling an image.

CSS3 Transform - Rotate

The above image uses the following CSS 3 to rotate the image 6 degrees.

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   transform: rotate(6deg);
  4. }

This is the same image, rotated -4 degrees.

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   transform: rotate(-4deg);
  4. }
 

CSS3 Transform - Skew / SkewX / SkewY

The above image uses the following CSS 3 to skew the image 25 degrees

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   transform: skew(-25deg);
  4. }
 

CSS3 Transform - Scale / ScaleX / ScaleY

The above image uses the following CSS 3 to scale the image 46%

  1. CSS3 Transform (rotate)
  2. .my_CSS3_class {
  3.   transform: scale(0.46);
  4. }


The best thing to do with transform, is add some css transitions!

 

The Zen Elements CSS3 Series

Thank you for reading!
@zen