CSS Transforms

The transform property allows for the skewing, stretching, scaling and rotating of page elements. Note that transformed page elements remain in normal flow: other page elements will not recognize the transformations.

• Syntax: transform: <transform-function>;
• Transform functions include: rotate() scale() skew() and translate()
• One or more transform-functions may be applied. If there is more than one, they are applied from left to right
• Note how elements surrounding a transformed element will not be affected by the transform (eg: transformed content may overlap other content)
• Apply rotation with positive (clockwise) or negative (counter clockwise) values with deg units

  .rotate_clockwise{	
  	transform:rotate(180deg);
  }
  .rotate_counter_clockwise{	
  	transform:rotate(-45deg);
  }

  • 
  • 
  • 
• 
  Apply scaling with decimal values where 1 is default size:

  .scale_small{	
  	transform:scale(.75);
  }
  .scale_x_y_axis{	
  	transform:scale(.5, 1.2);
  }

  • 
  • 
  • 
• 
  Skew with a comma delimited list of x and y coordinates as deg (degrees):

  .skew_x_axis{
  	transform:skew(-15deg, 0deg );
  }
  .skew_both_axis{
  	transform:skew(10deg, 10deg);	
  }

  • 
  • 
  • 
• 
  The translate transform will move an element with comma delimited x, y coordinates:

  .translate{
  	transform:translate(10px, -10px);
  }

  • 
  • 
  • 
• 
  Apply multiple transformations with a space delimited list:

  .many_transformations{
  	/* scale and skew */	
  	transform:skew(-15deg, 0deg) scale(.75) rotate(10deg);
  }

  • 
  • 
  • 
• 
  You can combine transforms with other CSS techniques, such as transitions, allowing for interesting interactive design options. eg: try hovering over the images below...
  
  • 
  • 
  • 

• Text Transforms

  Most content can have transforms applied. For example, you can use rotate() and scale() to spin and stretch text:

  Before:
  BCIT COMP1850
  After:
  BCIT COMP1850